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 hover选项。您需要将导航栏设置为position：relative，下拉菜单必须是绝对的。所以在你的子ul上我会为他们添加一个类。您需要设置类别ul的样式，以确保它在主导航下正确排列。

接下来，我会使用jQuery hover在您悬停时显示/隐藏按类别划分的ul。因此，这将需要“浏览”上的唯一ID或类或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。

导航栏悬停下拉列表

3 个答案: