水平菜单子菜单

我有一个水平列表菜单和每个菜单项的另一个水平列表子菜单。现在当页面第一次加载时，如果我将鼠标移开或直到我悬停在其他顶层菜单项上，则应显示其子菜单和其他顶层菜单的第一个顶层菜单并保持打开状态。当我将鼠标悬停在其他菜单上时，它们相应的子菜单应该显示出来。水平菜单子菜单

有人可以告诉我如何使用JavaScript或jQuery或CSS来做到这一点吗？

<div id="mytabs1" class="basictab"> 
    <ul> 
     <li class="basictab1" id="li1"><a id="link1" href="http://mysite/Benefits.aspx" rel="sc1" >Benefits</a></li> 
     <li class="basictab1" id="li2"><a id="link2" href="http://mysite/BESTPlan.aspx" rel="sc2">BEST Plan</a></li> 
     <li class="basictab1" id="li3"><a id="link3" href="http://mysite/Insurance.aspx" rel="sc3">Insurance</a></li> 
    </ul> 
</div> 

<DIV class="tabcontainer"> 
    <div id="sc1" class="tabcontent"> 
     <ul> 
     <li><a id="link1-1" href="http://test.com">Link 1a</a></li> 
     <li><a id="link1-2" href="http://test.com">Link 1b</a></li> 
     </ul> 
    </div> 
    <div id="sc2" class="tabcontent"> 
     <ul> 
     <li><a id="link2-1" href="http://test.com">Link 2a</a></li> 
     <li><a id="link2-2" href="http://test.com">Link 2b</a></li> 
     </ul> 
    </div> 
    <div id="sc3" class="tabcontent"> 
     <ul> 
     <li><a id="link3-1" href="http://test.com">Link 3a</a></li> 
     <li><a id="link3-2" href="http://test.com">Link 3b</a></li> 
     </ul> 
    </div> 
</DIV>

来源

2012-08-01 Athapali

这里是一个例子，指出你在正确的方向。

<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
     <style> 
      ul, li 
      { 
       display: block; 
      } 
      .sublinks 
      { 
       display: none; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="mytabs1" class="basictab"> 
      <ul> 
       <li class="basictab1" id="li1"> 
        <a id="link1" href="http://mysite/Benefits.aspx" rel="sc1" >Benefits</a> 
        <ul class="sublinks"> 
         <li><a id="link1-1" href="http://test.com">Link 1a</a></li> 
         <li><a id="link1-2" href="http://test.com">Link 1b</a></li> 
        </ul> 
       </li> 
       <li class="basictab1" id="li2"> 
        <a id="link2" href="http://mysite/BESTPlan.aspx" rel="sc2">BEST Plan</a> 
        <ul class="sublinks"> 
         <li><a id="link2-1" href="http://test.com">Link 2a</a></li> 
         <li><a id="link2-2" href="http://test.com">Link 2b</a></li> 
        </ul> 
       </li> 
       <li class="basictab1" id="li3"><a id="link3" href="http://mysite/Insurance.aspx" rel="sc3">Insurance</a></li> 
      </ul> 
     </div> 
     <script> 
      $('.basictab1').hover(function() 
      { 
       $(this).find('ul').toggle(); 
      }); 
     </script> 
    </body> 
</html>

来源

2012-08-01 16:45:11 Tivie

水平菜单子菜单

回答

相关问题