导航栏悬停下拉

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。