Question

我想在主菜单的“about us”标签中添加一个下拉菜单，我努力但却没有显示，

这是列表的html代码，

<li>
       <a href="aboutus.php">About Us</a>  
          <ul class="sub-menu">
              <li><a href="#">Menu 1</a></li>
              <li><a href="#">Menu 2</a></li>
              <li><a href="#">Menu 3</a></li>
          </ul>
   </li>

这是我创建的下拉菜单的css：

#menu ul li{float:none}
#menu ul li a{background:none !important;}
#menu ul li a:hover{background:url(../images/menu_active.gif) top repeat-x !important;display:block}
#menu ul{border:solid 1px #FC0;position: absolute;z-index: 100;background: #000;width:300px;display:none}

Answer 1

在这个小提琴中是你的代码的工作版本：

Jsfiddle

说明：

您没有在css中选择写<ul>

    #menu ul li:hover ul{background:url(../images/menu_active.gif) top repeat-x !important;display:block;}
    #menu ul li ul{border:solid 1px #FC0;z-index:999;background: #000;width:300px;display:none;}

检查JSFiddle的完整代码

如果您想在<li>或<ul>中选择<ul> <li>，请在您的css中使用此内容。

ul li ul li {}

Answer 2

这是纯css中下拉列表的示例。

.sub-menu { display: none; }
.menu:hover + .sub-menu { display: block; }

http://jsfiddle.net/greatghoul/TDA62/

鼠标悬停时，下拉列表不显示

2 个答案: