jquery implémente le menu déroulant de navigation secondaire effect_jquery

L'implémentation du menu déroulant est très simple, et elle peut également être implémentée avec du CSS pur, mais je ne suis pas doué pour cela. Il ne faut que deux lignes de code pour utiliser jquery, j'utilise donc jquery css pour. implémentez une simple navigation dans un menu déroulant secondaire. Je le partagerai avec vous pour votre référence. Le contenu spécifique comme suit

.

Opération de rendu :

Code spécifique :
Première étape : Déterminer le format html de la navigation

<ul id="nav"> 
        <li><a href="#">首页</a> 
          <ul> 
            <li><a href="#">PHP编程</a></li> 
            <li><a href="#">JAVA编程</a></li> 
            <li><a href="#">RGB对照表</a></li> 
            <li><a href="#">颜色搭配技巧</a></li> 
          </ul> 
        </li> 
        <li><a href="#">栏目一</a> 
          <ul> 
            <li><a href="#">PHP编程</a></li> 
            <li><a href="#">JAVA编程</a></li> 
            <li><a href="#">RGB对照表</a></li> 
            <li><a href="#">颜色搭配技巧</a></li> 
          </ul> 
        </li> 
<ul>

Étape 2 : CSS pour obtenir un effet de navigation 

 #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; 
      } 

Étape 3 : JQuery implémente l'effet de masquage de la liste déroulante

  $(function() {
        $("#nav li").hover(
            function() {
              $(this).find("ul").show(100);
            },
            function() {
              $(this).find("ul").hide(300);
            }
        );
      });

J'espère que cet article vous aidera à apprendre la programmation JavaScript et vous apprendra comment obtenir l'effet de menu déroulant de navigation secondaire via jquery.