가로 메뉴 하위 메뉴

각 메뉴 항목에 가로 목록 메뉴와 다른 가로 목록 하위 메뉴가 있습니다. 페이지가 처음으로로드 될 때 하위 메뉴와 다른 최상위 메뉴가있는 첫 번째 최상위 메뉴가 표시되고 마우스를 놓거나 다른 최상위 메뉴 항목 위로 마우스를 가져 가면 계속 켜져 있어야합니다. 다른 메뉴 위로 마우스를 가져 가면 해당 하위 메뉴가 표시됩니다.가로 메뉴 하위 메뉴

누군가 나를 자바 스크립트 나 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

가로 메뉴 하위 메뉴

답변

관련 문제