如何使用CSS3实现导航下拉菜单（附完整代码）

来源：懂视网责编：小采时间：2020-11-27 18:47:24

如何使用CSS3实现导航下拉菜单（附完整代码）

如何使用CSS3实现导航下拉菜单（附完整代码）:在当下网页结构当中，导航的菜单栏占据了一个很重要的位置，因为不仅仅可以展示示例，还可以给你对于内容最直观的印象，众所周知的是在html中<ul><li></li></ul>可以对菜单进行分级，那么我们可以配合css3实现导航下拉菜单。本篇

推荐度：

点击下载本文 文档为doc格式

导读如何使用CSS3实现导航下拉菜单（附完整代码）:在当下网页结构当中，导航的菜单栏占据了一个很重要的位置，因为不仅仅可以展示示例，还可以给你对于内容最直观的印象，众所周知的是在html中<ul><li></li></ul>可以对菜单进行分级，那么我们可以配合css3实现导航下拉菜单。本篇

在当下网页结构当中，导航的菜单栏占据了一个很重要的位置，因为不仅仅可以展示示例，还可以给你对于内容最直观的印象，众所周知的是在html中<ul><li></li></ul>可以对菜单进行分级，那么我们可以配合css3实现导航下拉菜单。本篇文章给大家带来的内容是关于如何使用css3实现导航下拉的菜单，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

使用css3实现导航下拉菜单的原理

首先要使用HTML当中的<ul><li></li></ul>进行菜单的制作，然后我们会用到一个hover语句，即鼠标悬停在某个区域内的时候，触发下级菜单的显示，其中需要了解到的是display的属性，我们将会使用block和none的属性实现下拉菜单的出现和隐藏。然后我们会给各个菜单定义position来确定菜单的位置，最后使用::after伪元素选择器来清除浮动。

使用css3实现导航下拉菜单的步骤

步骤一：利用HTML制作出菜单样式

<nav>
 <ul>
 <li><a href="#">导航一</a>
 <ul>
 <li><a href="#">二级导航</a></li>
 <li><a href="#">二级导航</a></li>
 <li><a href="#">二级导航</a></li>
 <li><a href="#">二级导航</a></li>
 </ul>
 </li>
 <li><a href="#">导航二</a></li>
 <li><a href="#">导航三</a>
 <ul>
 <li><a href="#">二级导航</a></li>
 <li><a href="#">二级导航</a></li>
 <li><a href="#">二级导航</a>
 <ul>
 <li><a href="#">三级导航</a></li>
 <li><a href="#">三级导航</a></li>
 <li><a href="#">三级导航</a></li>
 </ul>
 </li>
 <li><a href="#">二级导航</a></li>
 </ul>
 </li>
 <li><a href="#">导航四</a>
 <ul>
 <li><a href="#">二级导航</a></li>
 <li><a href="#">二级导航</a></li>
 <li><a href="#">二级导航</a></li>
 </ul>
 </li>
 <li><a href="#">导航五</a>
 <ul>
 <li><a href="#">二级导航</a></li>
 <li><a href="#">二级导航</a></li>
 </ul> 
 </li>
 <li><a href="#">导航六</a></li>
 </ul>
 </nav>

步骤二：利用css3实现鼠标悬停触发的下拉菜单

nav {
 margin:100px auto;
 text-align:center;
}
nav ul {
 border-radius:10px;
 background:linear-gradient(to bottom,#efefef,#bbbbbb);
 padding:0 20px;
 display:inline-table;
 position:relative; 
 box-shadow:1px 1px 3px #666;
}
nav ul ul {
 display:none;
}
nav ul li {
 float:left; 
}
nav ul::after {
 content:"";
 display:block;
 clear:both;
}
nav ul li a {
 display:block;
 padding:25px 40px;
 color:#000;
 text-decoration:none;
 font-family:"微软雅黑";
}
nav ul li:hover > ul {
 display:block;
}
nav ul li:hover {
 background:linear-gradient(to bottom,#4f5964,#5f6975);
}
nav ul li:hover a {
 color:#FFF;
}
nav ul ul {
 background:#5f6975;
 border-radius:0;
 position:absolute;
 top:100%;
 padding:0;
}
nav ul ul li {
 float:none;
 border-top:1px solid #6b727c;
 border-bottom:1px solid #575f6a;
}
nav ul ul li a {
 color:#FFF;
} 
nav ul ul li a:hover {
 background:#4b545f;
}
nav ul ul ul {
 width:100%;
 position:absolute;
 left:100%;
 top:50%;
}

步骤三：根据菜单样式的要求进行美化

下拉菜单样式如图所示

微信截图_20180925162148.png