Question

我是html / css的新手，我一直在处理这个下拉菜单：http://cssdeck.com/labs/full/k0aytbkc

这就是我想要实现的目标。 enter image description here

我正在尝试在下拉菜单中添加背景颜色，但由于某些原因，代码不允许我这样做，我无法弄清楚在哪里添加背景颜色。

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

HTML CODE：

<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;
}

<强>截图

enter image description here

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; Nav Ul下的属性，因为此项目是整个无序列表或下拉菜单。然后，对于每个列表项，将它放在Nav Ul Li下，但是如上所列，您可以通过为每个Li提供相同的类名来清理代码。

Answer 4

总的来说，使用适当命名的类而不是选择器总是一个好主意：

.nav li li li a:hover

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

.page-link:hover

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

但对你的问题。正如阿德里安指出的那样，你没有看到背景颜色的原因是因为花车。当一个元素浮动时，它的父元素不会自动采用其中浮动元素的高度。这是一个非常简单的例子： 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的浮动部分的末尾，这可以解决高度问题。我还在clear: both选择器中添加了.nav ul，因为它与标题有点碰撞。看看这里： http://cssdeck.com/labs/c4zdkxrh

一旦我做了这两件事并在垫片的底部添加了一点填充物，它看起来非常接近你的例子。还有一些悬停样式，你会好起来的！

希望有所帮助！

在下拉菜单中添加背景颜色时遇到问题

4 个答案: