导航栏和下拉菜单
学习链接:【前端经典】导航栏和下拉菜单,导航条弹出下拉菜单,网站导航栏和下拉菜单,html导
一些难点:
如何显示下拉项和隐藏下拉项,显示下拉项是使用父元素的hover触发
如何让二级下拉项从跟一级下拉分离开,对二级菜单使用相对定位,让一级下拉位于二级下拉左侧。
为了处理二级下拉显示时候的空白,设置一级下拉的高度
最终效果:
代码如下:
-
-
<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>
-
<style>
-
.nav{
-
height: 40px;
-
background-color: #eee;
-
box-shadow: 0px 1px 2px #666;
-
}
-
*{
-
/* 去掉导航栏两边的内边距 */
-
margin: 0;;
-
padding: 0;
-
/* 无文本装饰:无下划线 */
-
text-decoration: none;
-
list-style: none;
-
/* 给导航加阴影 */
-
}
-
.libt{
-
/* 让列表横排 */
-
float: left;
-
width:100px;
-
height: 40px;
-
/* 让里面的字体水平垂直居中 */
-
text-align: center;
-
line-height: 40px;
-
}
-
/* 设置超链接样式,初始状态为黑色字体*/
-
.libt a{
-
color: #000;
-
/* 把链接改为鼠标悬停时是块状显示,块大于字体块 */
-
display: block;
-
}
-
/* 设置鼠标悬停时为灰色块状 */
-
.libt a:hover{
-
background-color: #ccc;
-
}
-
.droplist{
-
/* 增加背景色和阴影 */
-
background-color: #eee;
-
box-shadow: 0px 1px 2px #666;
-
/* 隐藏下拉框 */
-
display: none;
-
}
-
/* 下拉显示是通过父元素的hover触发的 */
-
/* 显示下拉框 */
-
/* 一个bug: .libt :hover
-
改为:.libt:hover .droplist{ */
-
.libt:hover .droplist{
-
display: block;
-
}
-
.droplist li{
-
/* 增加上边框线隔离每一项 */
-
border-top: 1px solid #ccc;
-
/* 通过改变下拉一的总高度,去掉下拉二触发时,下拉一的空白 */
-
height: 40px;
-
}
-
/* 显示二级下拉,仍然使用父元素的hover触发*/
-
.droplist li:hover .droplist2{
-
display: block;
-
}
-
.droplist2{
-
/* 改变一级下拉和二级下拉处于一列的情况
-
将二级下拉挪到以及下拉的右侧 */
-
/* 相对定位 */
-
position: relative;
-
left: 100px;
-
/* 上移使下拉项跟触发项左右对齐 */
-
top:-40px;
-
background-color: #eee;
-
box-shadow: 0px 1px 2px #666;
-
/* 隐藏二级下拉 */
-
display: none;
-
}
-
</style>
-
</head>
-
<body>
-
<!-- 创建导航条 -->
-
<div class="nav">
-
<ul class="ullist">
-
<!-- 复制了五个菜单项 -->
-
<li class="libt">
-
<a href="#">菜单项</a>
-
<ul class="droplist">
-
<li><a href="#">我是下拉1</a></li>
-
<li>
-
<a href="#">我是下拉1</a>
-
<ul class="droplist2">
-
<!-- 如果不改变,一级下拉跟二级下拉在同一列 -->
-
<li><a href="#">我是下拉2</a></li>
-
<li><a href="#">我是下拉2</a></li>
-
<li><a href="#">我是下拉2</a></li>
-
<li><a href="#">我是下拉2</a></li>
-
<li><a href="#">我是下拉2</a></li>
-
<li><a href="#">我是下拉2</a></li>
-
</ul>
-
</li>
-
<li><a href="#">我是下拉1</a></li>
-
<li><a href="#">我是下拉1</a></li>
-
<li><a href="#">我是下拉1</a></li>
-
<li><a href="#">我是下拉1</a></li>
-
</ul>
-
</li>
-
<li class="libt">
-
<a href="#">菜单项</a>
-
<ul class="droplist">
-
<li><a href="#">我是下拉1</a></li>
-
<li><a href="#">我是下拉1</a></li>
-
<li><a href="#">我是下拉1</a></li>
-
<li><a href="#">我是下拉1</a></li>
-
<li><a href="#">我是下拉1</a></li>
-
<li><a href="#">我是下拉1</a></li>
-
</ul>
-
</li>
-
<li class="libt">
-
<a href="#">菜单项</a>
-
<ul class="droplist">
-
<li><a href="#">我是下拉1</a></li>
-
<li><a href="#">我是下拉1</a></li>
-
<li><a href="#">我是下拉1</a></li>
-
<li><a href="#">我是下拉1</a></li>
-
<li><a href="#">我是下拉1</a></li>
-
<li><a href="#">我是下拉1</a></li>
-
</ul>
-
</li>
-
<li class="libt">
-
<a href="#">菜单项</a>
-
<ul class="droplist">
-
<li><a href="#">我是下拉1</a></li>
-
<li><a href="#">我是下拉1</a></li>
-
<li><a href="#">我是下拉1</a></li>
-
<li><a href="#">我是下拉1</a></li>
-
<li><a href="#">我是下拉1</a></li>
-
<li><a href="#">我是下拉1</a></li>
-
</ul>
-
</li>
-
<li class="libt">
-
<a href="#">菜单项</a>
-
<ul class="droplist">
-
<li><a href="#">我是下拉1</a></li>
-
<li><a href="#">我是下拉1</a></li>
-
<li><a href="#">我是下拉1</a></li>
-
<li><a href="#">我是下拉1</a></li>
-
<li><a href="#">我是下拉1</a></li>
-
<li><a href="#">我是下拉1</a></li>
-
</ul>
-
</li>
-
</ul>
-
</div>
-
</body>
-
</html>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhffjhii
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24