導航欄懸停下拉

Question

我在創建此導航欄時很難在我的網站上進行導航。

我在我的html atm上有以下內容。請注意，此導航欄是該頁面上的第二個導航欄，因此是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？當我將鼠標懸停在'Browse'上時，我希望它顯示'By Category'和'By Uploader'兩個下拉列表，然後在鼠標懸停在'By Category'上的同時，我想要要出現的子列表。當鼠標懸停時，我想讓下拉/子列表消失。

另外，當我在這個頁面上時，我希望列表'A'比其他人（當前鏈接）更暗。

對不起，問一個問題福利局，因爲我很新建立一個網站:)

感謝您的幫助！

Answer 1

像以前一樣（position:relative和position: absolute）提到的，我創建了一個CSS例如在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是一個不錯的選擇，得到它的IE6，在那裏工作：懸停沒有按」 t除了a-tag之外的其他元素。

Answer 2

我不會這樣做與CSS，但使用jQuery的懸停選項。你將需要設置你的導航欄位置：相對和下拉菜單將需要是絕對的。所以在你的分支上，我會爲他們添加一個類。您需要按類別ul進行樣式設置，以確保它在主導航下正確排列。

接下來，我會使用jQuery懸停來顯示/隱藏按類別ul當您懸停。所以這將需要一個唯一的id或class在「瀏覽」或li包裝鏈接。

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

現在把它放在你的網頁。您可以根據您的要求編輯一些CSS。