精华内容
下载资源
问答
  • html导航栏二级菜单
    千次阅读
    2022-01-05 20:01:42

            二级菜单的实现思路为: 1.在默认状态下,使用display:none;将二级菜单隐藏。  2.当一级菜单中的列表标签li获取焦点(hover)后,使用display:blick;将二级菜单显示出来。  3.使用position: relative;和position: absolute;分别得一级菜单和二级菜单设置相对定位和绝对定位。

      本内容面向小白向,我在代码中加了详细的注释,解释了语句的作用。

      二级菜单展开后  效果如下(没有美化,见谅):

        HTMl代码如下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>二级菜单</title>
            <link rel="stylesheet" type="text/css" href="css/index.css"/>
        </head>
        <body>
            <div class="menu">
                <ul>
                    <li>首页</li>
                    <li>博客
                        <ul>
                            <li>博客1</li>
                            <li>博客2</li>
                            <li>博客3</li>
                        </ul>
                    </li>
                    <!-- 注意:需要将二级菜单的ul放在一级菜单的li标签内 -->
                    <li>新闻</li>
                    <li>账户</li>
                </ul>
            </div>
        </body>
    </html>

             CSS代码如下:

    ul li{
        list-style: none;
        /* 清除列表原有样式 */
    }
    .menu{
        width: 600px;
        height: 60px;
        background-color: aquamarine;
    }
    .menu ul li{
        float: left;
        /* 使列表(一级菜单)横向 */
        margin-right: 50px;
        margin-top: 20px;
        /* 设置一级菜单内容的位置 */
        position: relative;
    }
    .menu ul li ul{
        width: 100px;
        height: 160px;
        margin-left: -50px;
        background-color: #7FFFD4;
        display: none;
        /* 设置初始为不显示 */
        position: absolute;
    }
    .menu ul li:hover ul{
        display: block;
        /* 当一级菜单的li获取hover后将二级菜单的ul显示出来 */
    }

     原创内容,转载请注明出处!!!

    更多相关内容
  • HTML+CSS 实现二级菜单气泡框

    页面效果展示:

    在这里插入图片描述

    代码实现:

    HTML部分

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="CSS/bublle.css">
    </head>
    
    <body>
        <div class="nav">
            <ul>
                <li>
                    <a href="#">首页</a>
                </li>
                <li class="program1">
                    <div class="nav-item nav-item1">
                        <ul>
                            <li>中青志协</li>
                            <li>各地协会</li>
                            <li>伙伴组织</li>
                            <li>获奖组织</li>
                        </ul>
                    </div>
                    <a class="nav-a" href="#">志愿组织</a>
                </li>
                <li class="program2">
                    <div class="nav-item nav-item2">
                        <ul>
                            <li>关爱行动</li>
                            <li>西部计划</li>
                            <li>阳光行动</li>
                            <li>海外计划</li>
                            <li>暖冬行动</li>
                            <li>节水护水行动</li>
                        </ul>
                    </div>
                    <a class="nav-a" href="#">志愿项目</a>
                </li>
                <li class="program3">
                    <a href="#">志愿文化</a>
                </li>
                <li class="program4">
                    <div class="nav-item nav-item4">
                        <ul>
                            <li>七彩小屋</li>
                        </ul>
                    </div><a class="nav-a" href="#">志愿阵地</a>
                </li>
                <li>
                    <div class="nav-item nav-item5">
                        <ul>
                            <li>专家学者</li>
                            <li>骨干志愿者</li>
                            <li>注册志愿者</li>
                            <li>志愿学院</li>
                        </ul>
                    </div><a class="nav-a" href="#">志愿人才</a>
                </li>
                <li><a href="#">志愿发布</a></li>
                <li><a href="#">志愿服务交流会</a></li>
                <li class="program5">
                    <div class="nav-item nav-item5">
                        <ul>
                            <li>微博</li>
                            <li>微信</li>
                        </ul>
                    </div>
                    <a class="nav-a" href="#">志愿社区</a>
                </li>
                <li class="program6">
                    <div class="nav-item nav-item6">
                        <ul>
                            <li>助残系统</li>
                            <li>关爱系统</li>
                            <li>志愿中国</li>
                        </ul>
                    </div><a class="nav-a" href="#">登录 </a>
                </li>
            </ul>
    
        </div>
    
    </body>
    
    </html>
    

    CSS部分:

    * {
        padding: 0;
        margin: 0;
    }
    
    a {
        text-decoration: none;
    }
    
    li {
        list-style: none;
    }
    
    .nav {
        width: 100%;
        height: 57px;
        margin: 0 auto;
        background-color: #ebebeb;
        text-align: center;
        line-height: 57px;
        background: url(../img/边.gif) repeat-x center top;
    }
    
    .nav>ul>li {
        position: relative;
        display: inline-block;
    }
    
    .nav a {
        position: relative;
        display: inline-block;
        height: 52px;
        padding: 0 16px;
        font-size: 14px;
        color: #111;
    }
    
    .nav a:hover {
        background-color: #db261f;
        color: #fff;
    }
    
    .nav-item {
        display: none;
        position: absolute;
        width: 150px;
        /* height: 100px; */
        border: 1px solid pink;
        background-color: #ffece8;
        top: 111%;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .nav-item::before {
        content: "";
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        border: 10px solid pink;
        border-color: transparent transparent pink transparent;
    }
    
    .nav-item::after {
        content: "";
        position: absolute;
        top: -19px;
        left: 50%;
        transform: translateX(-50%);
        border: 10px solid #ffece8;
        border-color: transparent transparent #ffece8 transparent;
    }
    
    .nav-item>ul>li {
        height: 40px;
        line-height: 40px;
    }
    
    .program1:hover .nav-item1,
    .program2:hover .nav-item2,
    .program3:hover .nav-item3,
    .program4:hover .nav-item4,
    .program5:hover .nav-item5,
    .program6:hover .nav-item6 {
        display: block;
    }
    
    
    展开全文
  • NULL 博文链接:https://onestopweb.iteye.com/blog/2277031
  • 我们在淘宝、搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张...那么如何实现导航菜单栏中的二级下拉菜单呢?下面小编给大家分享JS中用三种方式实现导航菜单中的二级下拉菜单,感兴趣的朋友一起看看吧
  • 很漂亮的CSS下拉菜单导航,喜欢的童鞋可以下载试用下哦!
  • 左侧导航悬浮二级菜单是一款简单易用的jquery左侧固定导航,支持右侧二级导航
  • 这是一个HTML5+CSS3实现的响应式二级导航菜单,资源来源于网络,侵删
  • jquery实现的二级下拉菜单效果
  • 导航栏显示二级菜单

    2021-09-03 12:31:13
    <!DOCTYPE html>...二级菜单</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } ul{ list-style-type: none; } li{ width: 100px;
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>二级菜单</title>
    		<style type="text/css">
    			*{
    				margin: 0px;
    				padding: 0px;
    			}
    			ul{
    				list-style-type: none;
    			}
    			li{
    				width: 100px;
    				height: 40px;
    				background-color: #DB7093;
    				border: 1px solid #ADD8E6;
    				text-align: center;
    				line-height: 40px;
    				font-size: 20px;
    				float: left;
    			}
    			.u1 li li{
    				display: none;
    			}
    			.u1>li:hover li{
    				position: relative;
    				display: block;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="c1">
    			<ul class="u1">
    				<li>地区
    					<ul>
    						<li>商丘</li>
    						<li>商丘2</li>
    						<li>郑州</li>
    						<li>武汉</li>
    					</ul>
    				</li>
    				<li>爱好
    					<ul>
    						<li>篮球</li>
    						<li>排球</li>
    						<li>羽毛球</li>
    						<li>动漫</li>
    					</ul>
    				</li>
    				<li>订单</li>
    				<li>登录</li>
    				<li>详情</li>
    			</ul>
    		</div>
    	</body>
    </html>
    

    效果展示:鼠标悬停在一级标题上,显示二级菜单
    在这里插入图片描述

    展开全文
  • jquery导航栏样式鼠标悬停二级下拉菜单代码 jquery导航栏样式鼠标悬停二级下拉菜单代码 jquery导航栏样式鼠标悬停二级下拉菜单代码 jquery导航栏样式鼠标悬停二级下拉菜单代码
  • 二级页左侧导航菜单固定页面效果
  • 学习完HTML5+CSS之后,可以考虑设计并实现一个导航栏菜单,对某个项目比如你的个人书籍按类别(硬件类、软件类、语言类、网络类等分法)进行分门别类,其中上面括号中的类别为导航栏的一级菜单,它们各自的二级菜单...

    一.效果图

    在这里插入图片描述

    二.内容、要求

    学习完HTML5+CSS之后,可以考虑设计并实现一个导航栏菜单,对某个项目比如你的个人书籍按类别(硬件类、软件类、语言类、网络类等分法)进行分门别类,其中上面括号中的类别为导航栏的一级菜单,它们各自的二级菜单是你所拥有的或知道的几本可能的属于这些类别的具体书籍。

    html代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" type="text/css" href="12.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>二级导航栏</title>
    </head>
    <div id="menu">
        <ul>
            <li> <a href="" class="nodrop">个人书籍</a></li>
            <li>
            <a href="" class="drop">硬件类</a>
            <div class="dropdown_1column">
                <div class="col_1">
                        <ul class="simple">
                                <li><a href="">数字通信</a></li>
                                <li><a href="">通信原理</a></li>
                                <li><a href="">计算机网络</a></li>
                        </ul>
                </div>
            </div>
            </li>
            <li>
                <a href="" class="drop">软件类</a>
                <div class="dropdown_1column">
                    <div class="col_1">
                            <ul class="simple">
                                    <li><a href="">企业应用架构</a></li>
                                    <li><a href="">算法导论</a></li>
                                    <li><a href="">编译原理</a></li>
                            </ul>
                    </div>
                </div>
            </li>
            <li>
            <a href="" class="drop">语言类</a>
            <div class="dropdown_1column">
                <div class="col_1">
                        <ul class="simple">
                                <li><a href="">中国语情年报</a></li>
                                <li><a href="">隶变研究</a></li>
                                <li><a href="">辞书学纲要</a></li>
                        </ul>
                </div>
            </div>
            </li>
            <li>
                <a href="" class="drop">网络类</a>
                <div class="dropdown_1column">
                    <div class="col_1">
                            <ul class="simple">
                                    <li><a href="">网络技术基础</a></li>
                                    <li><a href="">网络工程师教程</a></li>
                                    <li><a href="">图解HTTP</a></li>
                            </ul>
                    </div>
                </div>
            </li>
        </ul>
        </div>
    
    </body>
    </html>
    

    css代码

    li{
        list-style-type: none;
    }
    #menu {
        width: 740px;
        margin: 30px auto 0px;
        height: 45px;
        background-color: #424242;
    }
    #menu li{
        float: left;
        width: 92px;
        line-height:39px;
        text-align: center;
        position:relative;
        border:none;
    }
    #menu li a {
        font-size:16px; color: #F4F4F4;
        display:block;
        outline:0;
        text-decoration:none; 
    }
    #menu li:hover a {
        color: #ff6700; /*导航栏文字颜色 */
    }
    #menu li:hover .dropdown_1column {
        left:0px;
        top:38px;
    }
    .dropdown_1column{ /* 下拉菜单边框颜色*/
        margin: 0px auto;
        float: left;
        position: absolute;
        left: -999em;
        text-align: left;
        border: 1px solid #424241;
        border-top: none;
        background: #F4F4F4;
        width: 92px;
    }
    #menu li:hover div a { /* 下拉菜单文字颜色*/
    font-size:12px
    ;color:#333;
    }
    
    #menu li:hover div a:hover{color:#ff6700;} /*下拉带单鼠标停留颜色*/
    
    #menu li ul {
    list-style:none;padding:10px 5px;
    margin:0;
    }
    #menu li ul li {
    font-size:12px;
    line-height:26px;
    position:relative;
    padding:0;margin:0;
    float:none;
    text-align:left;
    width:130px;
    }
    #menu li ul li:hover {
    background:none;
    border:none;padding:0;
    margin:0;
    }
    
    展开全文
  • 主要介绍了JS+CSS实现简单的二级下拉导航菜单效果,通过简单的JavaScript页面元素遍历及样式操作实现下拉菜单效果,非常简单实用,需要的朋友可以参考下
  • html 导航栏二级菜单

    千次阅读 2017-04-22 14:28:23
    HTML+CSS 实现网页二级导航栏 首先写HTML文件,写你想要制作的导航栏,例如: [code="html"] 二级导航栏 网站首页 慢生活 旅行 美食 ...
  • css3导航条制作鼠标悬停下拉二级导航菜单
  • .clearfix::after{content:"";display:block;clear:both;}.header{display:block;color:white;width:100%;height:60px;line-height:60px;background:darkseagreen;margin-top:-16px;}.container{width:1500px;...
  • html二级菜单导航栏成品

    千次阅读 2021-06-09 00:45:16
    html 高级二级导航菜单代码如下: #menu { width: 600px; font-family: Arial; font-size: 15px; } #menu ul { display: block; width: 100%; margin: 0; position: relative; } #menu ul li { list-style-type: ...
  • 这是一款十分清新的多级网页菜单,类似滑动门的操作风格,鼠标放上后,相应的二级菜单会显示出来,我觉得挺漂亮的,适合许多网站使用,不相信么?点击“运行代码”看效果吧。 运行效果截图如下: 在线演示地址如下...
  • HTML制作二级下拉菜单的方法步骤

    千次阅读 2021-07-01 03:45:40
    网络上的各种网页,二级下拉菜单非常常见,那么HTML中怎样制作二级下拉菜单呢?工具/材料hbuilder操作方法01如图,先书写一个div标签,并且给这个div标签添加一个id。02然后在div里面嵌套一个p标签,p标签里面放置了一个...
  • 初学者想做出这样的效果,可以跟着这给b站up的视频做 侧边导航栏实现,手把手超详细!_哔哩哔哩_bilibilim​​​​​​​zhttps://...content是我的二级菜单整个。biaoz...
  • 今天给大家推荐一款竖向可以展开折叠的
  • 本文实例讲述了JavaScript实现简单的二级导航菜单的方法。分享给大家供大家参考。具体如下: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
  • js树形导航菜单制作点击展开收缩二级菜单
  • 一个二级菜单导航条

    2013-06-05 08:48:46
    jquery导航菜单制作一个二级菜单导航条,鼠标滑过导航条二级菜单slide滑动展示且带有渐隐效果展示比较柔和的二级菜单目录
  • 使用纯CSS来实现的一个响应式导航菜单,我们使用的是HTML5+CSS3技术,当浏览器窗口变小或者使用手机浏览器访问的时候,原本横条菜单会收缩成一个下拉菜单,当鼠标滑向菜单时下拉展示全部菜单
  • /*设置二级菜单背景色*/ border-left:2px solid #007962; /*设置菜单左边框样式和颜色.*/ display:none; /*不再设置为块状显示效果*/ height:auto; position:absolute; width:130px; z-index:200; margin:0px; } 我...
  • 左侧竖向二级展开
  • jquery垂直导航菜单展开收缩垂直二级导航菜单代码

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,009
精华内容 8,803
关键字:

html导航栏二级菜单