In the current web page structure, the navigation menu bar occupies a very important position, because it can not only display examples, but also give you the most intuitive impression of the content. As we all know, in HTML
The principle of using css3 to implement navigation drop-down menu
First, use the
Steps to use css3 to implement navigation drop-down menu
##Step 1: Use HTML to create a menu style
<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>
Step 2: Use css3 to implement the drop-down menu triggered by mouse hover
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%; }
Step 3: Beautify according to the requirements of the menu style
The drop-down menu style is as shown in the picture
The above is the detailed content of How to use CSS3 to implement a navigation drop-down menu (complete code attached). For more information, please follow other related articles on the PHP Chinese website!