时遇到一个下拉菜单

Question

我是新来的HTML/CSS添加背景颜色，我一直在做这个下拉菜单：http://cssdeck.com/labs/full/k0aytbkc

这就是我想要的目的。

我想在下拉菜单中添加背景颜色，但由于某种原因代码不会让我这样做，我无法弄清楚在哪里添加背景颜色。

有谁知道我需要在代码中进行更改，或者我可以将背景颜色添加到下拉菜单中？

HTML代码：

<div class="nav"> 

<ul> 
<li><a href="#">MEN'S WEAR</a> 
    <ul> 
    <li>TOPS 
     <ul> 

     <li><a href="#">Jackets & Coats</a></li> 
     <li><a href="#">Shirts</a></li> 
     <li><a href="#">Overshirts</a></li> 
     <li><a href="#">T-Shirts</a></li> 
     <li><a href="#">Basic T-Shirts</a></li> 
     <li><a href="#">Knitwear</a></li> 
     <li><a href="#">Sweats</a></li> 
     </ul> 
    </li> 
    <li>BOTTOMS 
     <ul> 
     <li><a href="#">Jeans</a></li> 
     <li><a href="#">Colour Jeans</a></li> 
     <li><a href="#">Pants</a></li> 
     <li><a href="#">Shorts</a></li> 
     </ul> 
    </li> 
    <li>FOOTWEAR 
     <ul> 
     <li><a href="#">Boots</a></li> 
     <li><a href="#">Sandals</a></li> 
     <li><a href="#">Shoes</a></li> 
     <li><a href="#">Sneakers</a></li> 
     </ul> 
    </li> 
    <li>ACCESSORIES 
     <ul> 
     <li><a href="#">Belts</a></li> 
     <li><a href="#">Caps</a></li> 
     <li><a href="#">Hats</a></li> 
     <li><a href="#">Scarves</a></li> 
     <li><a href="#">Gloves</a></li> 
     <li><a href="#">Sunglasses</a></li> 
     <li><a href="#">Watches</a></li> 
     <li><a href="#">Jewelry</a></li> 
     </ul> 
    </li> 
    <li>SALE 
     <ul> 
     <li><a href="#">Jeans</a></li> 
     <li><a href="#">Caps</a></li> 
     <li><a href="#">Belts</a></li> 
     <li><a href="#">Sweats</a></li> 
     <li><a href="#">Jewelry</a></li> 
     <li><a href="#">Shirts</a></li> 
     </ul> 
    </li> 
    </ul> 
</li> 
</ul> 
</div> 

CSS代码：

.nav { 
position: relative; 
background-color: #ddd; 
width: 1024px; 
height: 42px; 
margin: 0 auto; 
-webkit-font-smoothing:antialiased; 

} 

.nav a { 

font: bold 16px/20px sans-serif; 
padding: 11px 20px; 
text-align: center; 
text-decoration: none; 
-webkit-transition: all .25s ease; 
    -moz-transition: all .25s ease; 
    -ms-transition: all .25s ease; 
    -o-transition: all .25s ease; 
     transition: all .25s ease; 
} 

.nav ul { 

list-style: none; 
left: 10px; 
} 

.nav ul li { 
position: relative; 
top: 1px; 
right: 70px; 
} 



.nav li { 

float: left; 
margin: 0; 
padding: 0; 
position: relative; 
min-width: 15%; 

} 

.nav li ul { 

visibility: hidden; 
z-index: 1px; 
opacity: 0; 
-webkit-transition: all .25s ease; 
    -moz-transition: all .25s ease; 
    -ms-transition: all .25s ease; 
    -o-transition: all .25s ease; 
     transition: all .25s ease; 



} 

.nav li a:hover { 
background: #000; 
color: #fff; 
} 

.nav li li li a:hover { 
background: transparent; 
color: #cd2323; 
text-decoration: underline; 


position: relative; 
padding-left: 20px; 
padding-right: 20px; 
} 

.nav li:hover ul { 
visibility: visible; 
opacity: 1; 


} 

.nav li li { 
position: relative; 
top: 30px; 
margin-left: 15px; 
right: 10px; 
padding: 2px; 
font-weight: bold; 
color: 8e8e8e; 
} 



.nav li a { 

top: 10px; 
left: 30px; 
position: relative; 
text-decoration: none; 
color: #000; 
font-weight: bold; 
} 

.nav li li ul { 
position: relative; 
bottom: 10px; 

} 
.nav li li ul li { 
right: 115px; 
top: 0px; 

float: none; 
position: relative; 

} 

.nav li li ul li a { 

text-decoration: none; 
color: #595959; 
font-size: 13px; 
font-weight: normal; 

} 

.nav li li li ul li { 
padding-right: 10px; 
} 

Answer 1

新建答案：

我想你需要重构你的HTML。但与此同时，这是解决这个问题的方法。将以下样式添加到您的CSS。

CSS

.nav > ul > li > ul{ 
overflow:hidden; 
background:orange; 
left:30px; 
top:20px; 
height:300px; 
width:983px; 
} 

截图

Answer 2

我希望这可以帮助你，更改类所有的首发名单的项目，如下发现，并更改背景颜色这个类的

HTML

<li class="yo">SALE 
<li class="yo">ACCESSORIES 
<li class="yo">FOOTWEAR 
<li class="yo">BOTTOMS 
<li class="yo">TOPS 

CSS

.yo{ 
background-color:grey; 
} 

JSFiddle演示

Answer 3

你想要的背景颜色将整个下拉菜单？或者你想为每个丢失的物品添加背景颜色？

对于想要放置背景的整个下拉菜单：color = COLOR;属性在导航UI下，因为这个项目是整个无序列表或下拉菜单。然后，对于每个列表项目，将其置于Nav UI Li下，但是，如上所列，您可以通过给每个Li赋予相同的类名称来清除代码。

Answer 4

作为一般的音符，它总是使用适当命名的类，而不是选择像这样一个好主意：

.nav li li li a:hover 

这同样的效果可以通过给锚可以实现标签一类的“页面级链接'或类似的东西，然后使用这样的选择器：

.page-link:hover 

然后，你不计数锂标签，直到你到了正确的水平。我发现它往往会使调试变得更简单。

但你的问题。正如Adrian指出的那样，你没有看到背景颜色的原因是因为漂浮物。当元素被浮动时，它的父元素不会自动采用浮动元素的高度。下面是一个非常简单的例子： http://jsfiddle.net/jCEhL/

i-float元素的高度为100px，但是您可以看到i-dont元素已完全折叠。尽管它内部有一个100px的元素，但它没有高度。我给了它一个蓝色的边框，只是让你看到它已经崩溃了。有很多方法来解决这个问题一大堆，因为在这篇文章中概述： How do you keep parents of floated elements from collapsing?

这里是我的小例子的固定版本，采用第3方法。我发现它是最简单的： http://jsfiddle.net/jCEhL/2/

我调整了一下你的css平台，我觉得它有点接近你所说的。我再次使用第三种方法，在其上添加一个间隔器到浮动部分的末尾，该部分上有clear:both，它修复了高度问题。我还为.nav ul选择器添加了一个clear: both，因为它与头部有点碰撞。看看这里： http://cssdeck.com/labs/c4zdkxrh

一旦我做这两件事情，并添加一点点填充到间隔的底部，它看起来相当接近你的榜样。还有更多的悬停风格，你会很开心！

希望有帮助！