마우스를 올리면 내비게이션 막대가 아래로 내려집니다.

Question

내 사이트 상단에 탐색 모음을 만드는 데 어려움이 있습니다.

나는 내 HTML atm에서 다음과 같은 것을 가지고있다. 이 탐색 바는 해당 페이지의 제 2 내비게이션 막대이므로 li 및 a에 대한 클래스입니다. (하위 목록에 대한 클래스/ID도 작성해야합니까?)

<div id="navbar2"> 
     <ul> 
      <li class="list"><a class="link" href="<?php echo base_url() ?>index.php/A">A</a></li> 
      <li class="list"><a class="link" href="">B</a></li> 
      <li class="list"><a class="link" href="">C</a></li> 
      <li class="list"><a class="link" href="">D</a></li> 
      <li class="list"><a class="link" href="">Browse</a> 
       <ul> 
        <li><a href="">By Category</a> 
         <ul> 
          <li><a href="">k</a></li> 
          <li><a href="">l</a></li> 
          <li><a href="">m</a></li> 
          <li><a href="">n</a></li> 
          <li><a href="">o</a></li> 
          <li><a href="">p</a></li> 
          <li><a href="">q</a></li> 
          <li><a href="">r</a></li> 
         </ul> 
        </li> 
        <li><a href="">By Uploader</a></li> 
       </ul> 
      </li> 
      <li class="list"><a class="link" href="">E</a></li> 
     </ul> 
</div> 

CSS 구현 방법에 대해 알고 싶습니다. '찾아보기'로 마우스를 가져 가면 '범주 별'및 '업 로더 별'의 2 개의 드롭 다운 목록을 표시하고 마우스가 '범주 별'상단에 마우스를 올리면 동시에 나타나는 서브리스트. 마우스가 움직이지 않으면 드롭 다운/하위 목록을 사라지게 할 수 있습니다.

또한이 페이지에있는 경우 'A'목록이 다른 것들 (현재 링크)보다 어두운 배경이되고 싶습니다.

나는 웹 사이트 : 당신의 도움에 대한

감사를 구축하기 위해 아주 새로운 해요 같은 newb 질문 죄송합니다!

Answer 1

, 난 jsFiddle

a { color: gray; } 
#navbar2 li:first-child a { color: black } /* make the letter A black */ 
#navbar2 li li:first-child a { color: gray } /* all others gray */ 

#navbar2 {} 

/* Level 1 */ 
#navbar2 ul { padding: 5px;} 
#navbar2 li { 
    display: inline; 
    position: relative; /* set the li-elements to relative, so the child-elements will be positioned on the parent element */ 
    white-space: nowrap; 
} 

/* Level 2 */ 
#navbar2 ul ul { 
    display: none; 
    position: absolute; 
    top: 15px; 
    left: 0 
} 
#navbar2 li:hover ul { display: inline } /* show the second-level nav.. */ 
#navbar2 li:hover ul ul { display: none } /* but hide the 3rd */ 
#navbar2 li li { 
    /* show the list, line after line */ 
    float:left; 
    clear: left; 
} 

/* Level 3 */ 
#navbar2 ul ul ul { 
    display: none; /* hide by default */ 
    width: 100px; 
    background: #eee; 
} 
#navbar2 li li:hover ul { 
    display: inline; 
    left: 25px; 
    z-index: 50; 
} 

jQuery를에 좋은 옵션을 CSS를 예입니다 만든, 그것은 IE6에서 작동 얻을 수 있습니다 : 가져가 '아무튼 a 태그를 제외하고 요소에 대해 작동하지 않습니다.

Answer 2

나는 CSS로 이것을하지는 않지만 대신 jquery hover 옵션을 사용한다. 네비게이션 바를 position : relative로 설정해야하며 드롭 다운 메뉴는 절대적이어야합니다. 그래서 당신의 서브 울에 나는 그들에게 수업을 추가 할 것입니다. 카테고리별로 ul 스타일을 지정하여 주 내비게이션 아래에서 제대로 정렬되도록해야합니다.

다음으로 joverery hover를 사용하여 커서를 올려 놓았을 때 카테고리 별 ul을 표시하거나 숨 깁니다. 그래서 이것은 "Browse"나 그 링크를 감싸고있는 li에 유일한 id 나 클래스를 요구할 것입니다. (position:relative 및 position: absolute) 전에 언급 한 것처럼

#navbar2 { position: relative; } 
#by-category { position: absolute; } 

Answer 3

이것은 내가 지금

<style> 
#navbar2 li{ border-radius:5px;list-style-type:none; list-style-position:inside; border:1px solid #bbb; padding:5; background:#383838; width:50} 

#navbar2 .list:first-child{background:#fc7;} 

#navbar2 .list:first-child a{color:#383838} 

#navbar2 a,#navbar2 a:visited{ text-decoration:none; color:#fc7} 

#navbar2 .list{ float:left; } 

#navbar2 a:hover{ color:blue } 

#navbar2 li ul{ height:0; width:0; } 

#navbar2 ul li ul li{ position:relative; top:5; width:100; left:-46; } 

#navbar2 ul li ul{ display:none } 

#navbar2 ul li ul li:first-child ul li{ left:65; top:-24; width:50; display:none} 
</style> 
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
<script> 
$(document).ready(function(){ 
    $("#navbar2 ul li:eq(4)").mouseenter(function(){ 
    $("#navbar2 ul li ul").fadeIn(600); 
    }); 
    $("#navbar2 ul li:eq(4)").mouseleave(function(){ 
    $("#navbar2 ul li ul").fadeOut(600); 
    }); 
    $("#navbar2 ul li ul li:first").mouseenter(function(){ 
    $("#navbar2 ul li ul li:first-child ul li").fadeIn(600); 
    }); 
    $("#navbar2 ul li ul li:first").mouseleave(function(){ 
    $("#navbar2 ul li ul li:first-child ul li").fadeOut(600); 
    }); 
}); 
</script> 

을 made- 웹 페이지에 넣어 한 것입니다. 귀하는 귀하의 요구 사항에 따라 일부 CSS를 편집 할 수 있습니다.