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

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

截图