带有悬停下拉菜单的导航栏

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 吗？当我将鼠标悬停在“浏览”上时，我希望它显示 2 个下拉列表“按类别”和“按上传者”，然后当鼠标悬停在“按类别”顶部时，我想要要显示的子列表。当鼠标不悬停时，我希望下拉/子列表消失。

另外，当我在此页面上时，我希望列表“A”的背景比其他列表更暗（当前链接）。

很抱歉问了一个新手问题，因为我对建立网站很陌生:)

感谢您的帮助！

Answer 1

如前所述（position:relative 和 position: absolute），我在 jsFiddle 上创建了一个 css 示例

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 中工作，其中 :hover 不适用于除 a-tag 之外的元素。

Answer 2

我不会使用 CSS 执行此操作，而是使用 jquery 悬停选项。您需要将导航栏设置为 position: relative 并且下拉菜单需要是绝对的。所以在你的 sub ul 上，我会为他们添加一个类。您需要设置按类别 ul 的样式，以确保它在主导航下正确排列。

接下来我将使用 jQuery hover 在您悬停时显示/隐藏按类别 ul。因此，这将需要“浏览”或包装该链接的 li 上的唯一 id 或类。

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