下拉菜單背景顏色

Question

我想填充背景顏色的下拉菜單爲紅色，但我的編碼不起作用。以下是我目前使用的編碼。

HTML

<div class="divMenu"> 
    <ul class="menu"> 
     <li><a href="index.html">HOME</a></li> 
     <li> 
      <a href="brands.html">BRANDS</a> 
      <ul> 
       <li><a>Brand 1</a></li> 
       <li><a>Brand 2</a></li> 
       <li><a>Brand 3</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="categories.html">CATEGORIES</a> 
      <ul> 
       <li><a>Category 1</a></li> 
       <li><a>Category 2</a></li> 
       <li><a>Category 3</a></li> 
      </ul> 
     </li> 
     <li><a href="new_arrivals.html">NEW ARRIVALS</a></li> 
     <li><a href="contact.html">CONTACT</a></li> 
    </ul> 
</div> 

CSS

.divMenu ul.menu > li {list-style: none; color: #000; font-weight: bold; float: left; padding: 5px 25px;} 
.divMenu ul.menu > li a {text-decoration: none; color: #000;} 
.divMenu ul.menu > li:hover {background-color: #f44336; cursor: pointer;} 
.divMenu ul.menu > li a:hover {background-color: #f44336; color: #fff!important; cursor: pointer;} 
.divMenu ul.menu ul {display: none; list-style-type: none; background-color: #f44336;} 
.divMenu ul.menu > li:hover ul {display: block; padding: 0; margin: 0; z-index: 10; position: absolute;} 

結果，請參考圖片如下：

Answer 1

.divMenu ul.menu > li {list-style: none; color: #000; font-weight: bold; float: left; position: relative;} 
 
.divMenu ul.menu > li a {text-decoration: none; color: #000;padding: 5px 25px;display: block;} 
 
.divMenu ul.menu > li:hover {background-color: #f44336; cursor: pointer;} 
 
.divMenu ul.menu > li a:hover {background-color: #f44336; color: #fff!important; cursor: pointer;} 
 
.divMenu ul.menu ul {display: none; list-style-type: none; background-color: #f44336;padding: 0;width: 100%;} 
 
.divMenu ul.menu > li:hover ul {display: block; padding: 0; margin: 0; z-index: 10; position: absolute;}

<div class="divMenu"> 
 
<ul class="menu"> 
 
    <li><a href="index.html">HOME</a></li> 
 
    <li> 
 
     <a href="brands.html">BRANDS</a> 
 
     <ul> 
 
      <li><a>Brand 1</a></li> 
 
      <li><a>Brand 2</a></li> 
 
      <li><a>Brand 3</a></li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <a href="categories.html">CATEGORIES</a> 
 
     <ul> 
 
      <li><a>Category 1</a></li> 
 
      <li><a>Category 2</a></li> 
 
      <li><a>Category 3</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="new_arrivals.html">NEW ARRIVALS</a></li> 
 
    <li><a href="contact.html">CONTACT</a></li> 
 
</ul> 
 
</div>

Answer 2

.divMenu ul.menu > li {list-style: none; color: #000; font-weight: bold; float: left; } 
.divMenu ul.menu > li a { padding: 15px; display: block; } 
.divMenu ul.menu > li a {text-decoration: none; color: #000;} 
.divMenu ul.menu > li:hover {background-color: #f44336; cursor: pointer;} 
.divMenu ul.menu > li:hover {background-color: #f44336; color: #fff!important; cursor: pointer;} 
.divMenu ul.menu ul {display: none; list-style-type: none; background-color: #f44336;} 
.divMenu ul.menu > li:hover ul {display: block; z-index: 10; } 

.divMenu ul.menu > li a:hover {color: #fff!important;} 

.divMenu ul.menu > li { 
    display: block; 
} 

.divMenu ul.menu > li ul { 
    padding:   0px; 
    margin:    0px; 
    margin-top:   0px; 
} 

.divMenu ul.menu > li li { 
    display: block; 
    padding: 0px; 
    width:  100%; 
    margin:  0px; 
}