The implementation of the drop-down menu is very simple, and can also be implemented with pure css, but I am not good at it. jquery is just two lines of code. As a result, the blog uses jquery + css to implement simple level-2 drop-down menu navigation. Step 1: Determine the html format of the navigation & amp; lt; ulid = & quot; nav
The implementation of the drop-down menu is very simple, and can also be implemented with pure css, but I am not good at it. jquery is just two lines of code. As a result, the blog uses jquery + css to implement simple level-2 drop-down menu navigation.
Step 1: Determine the html format of the navigation
- Homepage
- PHP programming
- JAVA programming
- RGB table
- Color Matching skills
- Topic 1
- PHP programming
- JAVA programming
- RGB table
- Color Matching skills
Step 2: implement the navigation effect with CSS
#nav { line-height: 24px; list-style-type: none; background:#666; } #nav a { display: block; width: 100px; text-align:center; } #nav a:link { color:#666; text-decoration:none; } #nav a:visited { color:#666;text-decoration:none; } #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; } #nav li { float: left; width: 100px; background:#CCC; } #nav li a:hover{ background:#999; } #nav li ul { line-height: 27px; list-style-type: none;text-align:left; width: 180px; position: absolute;display: none; } #nav li ul li{ float: left; width: 180px; background: #F6F6F6; } #nav li ul a{ display: block; width: 156px;text-align:left;padding-left:24px; } #nav li ul a:link { color:#666; text-decoration:none; } #nav li ul a:visited { color:#666;text-decoration:none; } #nav li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; }
Step 3: implement the drop-down and hide effect using jquery
$(function() { $("#nav li").hover( function() { $(this).find("ul").show(100); }, function() { $(this).find("ul").hide(300); } ); });
View results