在当下网页结构当中,导航的菜单栏占据了一个很重要的位置,因为不仅仅可以展示示例,还可以给你对于内容最直观的印象,众所周知的是在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%; }

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

下拉菜单样式如图所示

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

标签
DT素材网

DT素材网

155

0

0

( 此人很懒并没有留下什么~~ )