Question

我想更改当前菜单以允许一个下拉列表：产品。我的测试页面可以找到here这是我的HTML：

<nav>
       <ul class="menu">
        <li class="current"><a href="">Home</a></li>
        <li><a href="">About Us</a></li>
        <li class="subNav"><a class="selected">Products</a>
        <ul>
    <li><a href="">Designer Bags</a>
    </li>
    <li><a href="">Cowhides</a>
    </li>
    <li><a href="">Hand-carved Geese</a>
    </li>
    <li><a href="">Antler Chandeliers</a>
    </li>
  </ul>
         <li><a href="">Gallery</a></li>
        <li><a href="">Shows</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="" target="_blank">Shop</a></li>
      </ul>
   </nav>

我原来的CSS：

.nav-buttons{text-align:center;padding-bottom:17px;}
#nav{overflow:hidden;display:inline-block}
#nav li{float:left;overflow:hidden;margin:0 10px}
#nav li a{display:block;background:url(../images/pags.png) no-repeat 0 0;
width:19px;height:19px;
line-height:0;font-size:0;
}
#nav li a:hover,#nav li.showPage a{background-position: 0 bottom}

nav{float:right;padding:12px 0 0 0}
.menu {
font-size:0;
line-height:0;
padding:0;
z-index:99;
position:relative;
margin-right:21px;
}

.menu > li {
 position:relative;
 float:left;    
 margin-left:11px;
 border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
 background:url(../images/point.png)
 }

.menu li  a{
 color:#b3adad;
 font-size:18px;
 line-height:20px;
 display:block;    
 position:relative;
 text-decoration:none !important;   
 padding:7px 12px 9px;
 font-family: 'Noto Sans', sans-serif;
 }


.menu li.current,
.menu li:hover {
 background:#9c6f51;
 }

.menu li.current a,
.menu li:hover a{
 color:#fff
 }

我今天刚刚添加了一些CSS：

nav a {
font-weight: 800;
padding: 5px 10px;
display: block;
}

nav > ul > li.subNav ul {
display: none;
position: absolute;
top: 100%;
left: 0;
white-space: nowrap;
background: #fff;
}

nav ul li.subNav:hover ul {
display: block;
}

除非我将鼠标悬停在它上面，否则它似乎想要处理除了我看不到子菜单的例外情况。我来这里寻求帮助是因为我害怕弄乱原来的CSS，从而在整个网站的其余部分毁了我的导航。有什么我可以添加，将导致菜单出现在＆＃34; subNav＆＃34;类，不影响菜单或网站导航的其余部分？（最初的CSS附带了这个模板，我注意到font-size：0被使用了几次。由于菜单运行良好之前我觉得我需要添加一个下拉列表，我一直不愿意改变它，因为我会只是在不理解的情况下进行实验。）

Answer 1

我已经对它进行了分类。我不得不改变＆＃34; subNav＆＃34;中的背景颜色。 class，以便显示网站菜单的整体字体颜色。它在那里;我只是无法看到它。

只能在悬停时显示CSS下拉列表

1 个答案: