不同背景下拉菜單

我已經創建了一個CSS下拉菜單，可以在這裏查看：http://jsfiddle.net/7ZWnJ/和代碼粘貼在下面。不同背景下拉菜單

是否有反正我可以使下拉部分有不同的背景顏色（例如：紅色），但主標題保持橙色？

非常感謝，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <style> 
      #brands { 
       height: 430px; 
       overflow-y:auto; 
       overflow-x:hidden; 
       position: absolute; 
       width: 460px; 
       z-index: 123; 
      } 
      #menu { 
       z-index: 999; 
      } 
      ul { 
       font-family: Arial; 
       font-size: 12px; 
       margin: 0; 
       padding: 0; 
       list-style: none; 
       font-weight: bold; 
      } 
      ul li { 
       position: relative; 
      } 
      li ul { 
       display: none; 
       width: 133px; 
      } 
      ul li a { 
       display: block; 
       text-decoration: none; 
       color: #ffffff; 
       padding: 3px 15px 3px 15px; 
       margin: 0; 
       border-top: #f79448 1px solid; 
       border-bottom: #f79448 1px solid; 
      } 
      ul li a:hover { 
       z-index: 1000; 
       background-color: #F79448; 
      } 
      li:hover ul { 
       display: block; 
       position: absolute; 
       z-index: 1000; 
       width: 134px; 
       margin-left: -3px; 
      } 
      li:hover li { 
       font-size: 12px; 
      } 
      li:hover a { 
       background-color: #F79448; 
      } 
      li:hover li a:hover { 
      } 
     </style> 
    </head> 

    <body> 
     <table border="0" cellpadding="3" cellspacing="0"> 
      <tr class="nav-links"> 
       <td width="128" height="18" align="center" bgcolor="#f79448"> 
        <ul id="menu2"> 
         <li class="2"><a href="#">OPTION 1</a> 

          <ul> 
           <li><a href="#">OPTION 2</a> 
           </li> 
           <li><a href="#">OPTION 3</a> 
           </li> 
           <li><a href="#">OPTION 4</a> 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </td> 
      </tr> 
     </table> 
    </body> 
</html>

來源

2013-07-30 Darren Riches

以下內容添加到您的樣式表：

#menu2 li ul li a{background:#F00; border-color:#F00}

這裏有一個JSFiddle

來源

2013-07-30 10:56:42 George

謝謝！像夢一樣工作:-) –

很高興幫助（： – George

通過CSS，最好的辦法是給你的標題裏標籤的ID和設置所有項目裏，除了顏色的標題爲紅色。但是，如果您希望在標題更改時執行此操作，並且可以在JavaScript中跟蹤哪個列表項是「頭」，並且每當「頭」發生更改時，都要相應地更改背景顏色。

來源

2013-07-30 10:53:52

考慮到你的菜單是一個無序列表（ul），你可以添加不同的類，你要的元素區分（li）。

I.e.在CSS：

li.diff { 
    background-color: #FF0000; 
}

而在HTML：

<li class="diff"><a href="#">OPTION 2</a></li>

來源

2013-07-30 10:59:17 Alex

不同背景下拉菜單

回答

相關問題