在当下网页结构当中,导航的菜单栏占据了一个很重要的位置,因为不仅仅可以展示示例,还可以给你对于内容最直观的印象,众所周知的是在html中
使用css3实现导航下拉菜单的原理
首先要使用HTML当中的
使用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实现导航下拉菜单(附完整代码)的详细内容。更多信息请关注PHP中文网其他相关文章!