jquery realizes level Two navigation Pull-down menu effect _jquery

Pull-down Menu implementation is very simple, pure CSS can also be achieved, but I am not good at, with jquery also on two lines of code, so the use of jquery+css to achieve a simple two-level Drop-down menu navigation, to share for everyone to reference, the specific content as follows

Run Effect chart:

Specific code:
First step: determine the HTML format of the navigation

<ul id= "NAV" > 
        <li><a href= "#" > Home </a> 
          <ul> 
            <li><a href= "#" > PHP programming </a></li> 
            <li><a href= "#" >java programming </a></li> 
            <li><a href= "#" >RGB table </a></li> 
            <li><a href= "#" > Color matching techniques </a></li> 
          </ul> 
        </li> 
        <li><a href= "#" > Column a </a> 
          <ul> 
            <li><a href= "#" > PHP programming </a></li> 
            <li><a href= "#" >java programming </a></li> 
            <li><a href= "#" >RGB table </a></li> 
            <li><a href= "#" > Color collocation techniques </a></li> 
          </ ul> 
        </li> 
<ul>

Step Two: CSS to achieve navigation effect

 #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 three:jquery to realize the hidden effect of pull down

  $ (function () {
        $ ("#nav li"). Hover (
            function () {
              $ (this). FIND ("UL"). Show (+);
            },
            function () {
              $ (this). FIND ("ul"). Hide (+);});
      

I hope this article will help you learn JavaScript program design, teach you through jquery to achieve level two navigation drop-down menu effect.