不同背景下拉菜单

我已经创建了一个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

不同背景下拉菜单

回答

相关问题