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

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

您是否想要整个下拉菜单的背景色？ 还是您想要每个丢失物品的背景色？

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

Answer 4

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

.nav li li li a:hover

通过为锚标记提供一类“页面链接”或类似的东西，然后使用如下选择器，可以达到相同的效果：

.page-link:hover

直到达到正确的级别，您才可以算出li标签。 我发现它倾向于使调试更简单。

但是对你的问题。 正如Adrian指出的那样，您看不到背景颜色的原因是由于浮动。 浮动元素时，其父元素不会自动采用其内部浮动元素的高度。 这是一个非常简单的示例： http : //jsfiddle.net/jCEhL/

i-float元素的高度为100px，但是您可以看到i-dont元素完全折叠了。 即使其中包含100px的元素，也没有高度。 我给了它一个蓝色的边框，以便您可以看到它已折叠。 正如本文所概述的，有很多方法可以解决此问题： 如何防止浮动元素的父项崩溃？

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

我对您的css卡座做了一些调整，我认为它与您在说的差不多。 我再次使用了第3种方法，即在浮动部分的末尾添加了clear:both的分隔符clear:both固定了，这可以解决高度问题。 我还添加了一个clear: both添加到.nav ul选择器中，因为它与标头有点冲突。 在这里看看： http : //cssdeck.com/labs/c4zdkxrh

一旦完成了这两项操作，并在垫片的底部添加了一些填充，它看起来就很接近您的示例。 还有其他几种悬停样式，您将一臂之力！

希望有帮助！