Jquery + css implement simple level-2 drop-down menu navigation

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