简洁好用的网站导航栏下拉菜单

下拉导航菜单在我们做网站的时候十分常用，今天分享一个简单的下拉导航菜单(纯css和html)，里面含有相关的代码设置和预览。

原理非常简单，运用的是css中的display属性，正常状态下下拉导航子菜单处于隐藏状态(none)，当鼠标放上去时变为块元素（block）。代码如下：

css相关代码：

<style type="text/css">
.menu {
width:80%;
margin: 0px;
line-height: 72px;
}
.menu ul li {
list-style:none;
}
.menu ul li a {
margin:0px 21px;
color: #333;
font-size:1.6rem;
float: left;
}
.nav1 {
position: relative;/* 设置相对定位 */
display: inline-block;/* 让元素具有块级元素和行内元素的特性,即将块级元素转化为内联元素 */
}
.nav2 {
display: none;/* 将某元素隐藏起来 */
position: absolute;/* 绝对定位 */
margin-top: 55px;
background-color: #ffffff;
}
.menu ul li div.nav2 a {
display: block;
line-height: 32px;
padding: 0px 21px;
margin: 0px auto;
border-bottom: #f4f4f4 solid 1px;
float: none;
}
.nav1:hover .nav2 {
display: block;
z-index: 1;
}/* 鼠标悬浮在元素上时,变为块级标签 */
</style>


html相关代码：

<div class="menu">
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
<li><a href="#">导航5</a></li>
<li class="nav1"> <a href="#">下拉导航</a>
<div class="nav2"> <a href="#">子导航1</a> <a href="#">子导航2</a> <a href="#">子导航3</a> </div>
</li>
</ul>
</div>


预览地址：https://www.dajianbiji.com/test/Drop-down-navigation/banner-nav.html

代码样式根据我们自己的需要修改。