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显示出来 */
}

原创内容，转载请注明出处！！！

css html

更多相关内容

html+css 实现导航栏二级菜单——气泡框

2022-06-07 23:21:24

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;
}

收起

展开全文

css html

HTML 纯CSS二级菜单的导航
2019-08-12 01:44:15

NULL 博文链接：https://onestopweb.iteye.com/blog/2277031

收起
JS中用三种方式实现导航菜单中的二级下拉菜单
2020-10-21 05:09:43

我们在淘宝、搜狐等大型网站上都可以看到使用的一些二级下拉菜单，比如下面这张...那么如何实现导航菜单栏中的二级下拉菜单呢？下面小编给大家分享JS中用三种方式实现导航菜单中的二级下拉菜单，感兴趣的朋友一起看看吧

收起
漂亮的CSS二级竖向导航菜单
2020-06-06 00:40:47

很漂亮的CSS下拉菜单导航，喜欢的童鞋可以下载试用下哦！

收起
左侧导航悬浮二级菜单特效代码
2021-03-20 04:59:45

左侧导航悬浮二级菜单是一款简单易用的jquery左侧固定导航，支持右侧二级导航。

收起
CSS3响应式二级导航菜单
2019-01-24 14:47:00

这是一个HTML5+CSS3实现的响应式二级导航菜单，资源来源于网络，侵删

收起
jquery制作一个横向二级导航下拉菜单
2020-06-05 23:55:31

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>

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

收起

展开全文

css html

jquery导航栏样式鼠标悬停二级下拉菜单代码
2019-11-19 22:46:00

jquery导航栏样式鼠标悬停二级下拉菜单代码 jquery导航栏样式鼠标悬停二级下拉菜单代码 jquery导航栏样式鼠标悬停二级下拉菜单代码 jquery导航栏样式鼠标悬停二级下拉菜单代码

收起
二级页左侧导航菜单固定页面效果
2019-11-20 22:29:46

二级页左侧导航菜单固定页面效果

收起

HTML+CSS实现导航栏二级下拉菜单图书案例

千次阅读 2021-09-26 19:59:44

学习完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;
}

收起

展开全文

css html

JS+CSS实现简单的二级下拉导航菜单效果
2020-10-23 14:28:08

主要介绍了JS+CSS实现简单的二级下拉导航菜单效果,通过简单的JavaScript页面元素遍历及样式操作实现下拉菜单效果,非常简单实用,需要的朋友可以参考下

收起
html 导航栏二级菜单
千次阅读 2017-04-22 14:28:23

HTML+CSS 实现网页二级导航栏 首先写HTML文件，写你想要制作的导航栏，例如： [code="html"] 二级导航栏 网站首页慢生活旅行美食 ...

收起

html css
css3导航条制作鼠标悬停下拉二级导航菜单
2021-06-04 05:29:13

css3导航条制作鼠标悬停下拉二级导航菜单

收起
HTML+CSS简单实现导航栏二级下拉菜单
2021-06-10 09:13:39

.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: ...

收起
js实现的二级横向菜单条实例
2020-11-30 15:32:30

这是一款十分清新的多级网页菜单，类似滑动门的操作风格，鼠标放上后，相应的二级菜单会显示出来，我觉得挺漂亮的，适合许多网站使用，不相信么？点击“运行代码”看效果吧。运行效果截图如下：在线演示地址如下...

收起
HTML制作二级下拉菜单的方法步骤
千次阅读 2021-07-01 03:45:40

网络上的各种网页,二级下拉菜单非常常见,那么HTML中怎样制作二级下拉菜单呢?工具/材料hbuilder操作方法01如图,先书写一个div标签,并且给这个div标签添加一个id。02然后在div里面嵌套一个p标签，p标签里面放置了一个...

收起
网页左侧导航栏二级菜单的显示隐藏
2022-03-20 11:46:28

初学者想做出这样的效果，可以跟着这给b站up的视频做侧边导航栏实现，手把手超详细！_哔哩哔哩_bilibilimzhttps://...content是我的二级菜单整个。biaoz...

收起

html javascript
竖向二级折叠导航菜单(只展开一个)
2020-06-05 21:55:20

今天给大家推荐一款竖向可以展开折叠的

收起
JavaScript实现简单的二级导航菜单实例
2020-12-07 11:04:53

本文实例讲述了JavaScript实现简单的二级导航菜单的方法。分享给大家供大家参考。具体如下： <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

收起
js树形导航菜单制作点击展开收缩二级菜单
2019-11-20 22:23:21

js树形导航菜单制作点击展开收缩二级菜单

收起
一个二级菜单导航条
2013-06-05 08:48:46

jquery导航菜单制作一个二级菜单导航条，鼠标滑过导航条二级菜单slide滑动展示且带有渐隐效果展示比较柔和的二级菜单目录

收起
css3与html5实现响应式导航菜单(导航栏)效果分享
2020-09-25 05:04:49

使用纯CSS来实现的一个响应式导航菜单，我们使用的是HTML5+CSS3技术，当浏览器窗口变小或者使用手机浏览器访问的时候，原本横条菜单会收缩成一个下拉菜单，当鼠标滑向菜单时下拉展示全部菜单

收起
如何使用CSS控制二级导航菜单宽度？_html/css_WEB-ITnose
2021-06-08 19:06:12

/*设置二级菜单背景色*/ border-left:2px solid #007962; /*设置菜单左边框样式和颜色.*/ display:none; /*不再设置为块状显示效果*/ height:auto; position:absolute; width:130px; z-index:200; margin:0px; } 我...

收起
js二级滑动展开菜单导航
2020-06-05 22:27:18

左侧竖向二级展开

收起
jquery垂直导航菜单展开收缩垂直二级导航菜单代码
2019-11-20 22:29:11

jquery垂直导航菜单展开收缩垂直二级导航菜单代码

收起

html+css 实现导航栏二级菜单——气泡框

页面效果展示：

代码实现：

HTML 纯CSS二级菜单的导航

JS中用三种方式实现导航菜单中的二级下拉菜单

漂亮的CSS二级竖向导航菜单

左侧导航悬浮二级菜单特效代码

CSS3响应式二级导航菜单

jquery制作一个横向二级导航下拉菜单

导航栏显示二级菜单

jquery导航栏样式鼠标悬停二级下拉菜单代码

二级页左侧导航菜单固定页面效果

HTML+CSS实现导航栏二级下拉菜单图书案例

一.效果图

二.内容、要求

html代码

css代码

JS+CSS实现简单的二级下拉导航菜单效果

html 导航栏二级菜单

css3导航条制作鼠标悬停下拉二级导航菜单

HTML+CSS简单实现导航栏二级下拉菜单

html二级菜单导航栏成品

js实现的二级横向菜单条实例

HTML制作二级下拉菜单的方法步骤

网页左侧导航栏二级菜单的显示隐藏

竖向二级折叠导航菜单(只展开一个)

JavaScript实现简单的二级导航菜单实例

js树形导航菜单制作点击展开收缩二级菜单

一个二级菜单导航条

css3与html5实现响应式导航菜单(导航栏)效果分享

如何使用CSS控制二级导航菜单宽度？_html/css_WEB-ITnose

js二级滑动展开菜单导航

jquery垂直导航菜单展开收缩垂直二级导航菜单代码

html导航栏二级菜单