子菜单的CSS样式复制主菜单列表项的样式

时间:2013-06-15 19:37:26

标签: css menu

这是我一直在研究的客户网站:http://sedonastory.com

在任何选定的页面上,当您将鼠标悬停在该页面的主菜单列表项上时,下拉列表中的链接颜色错误。它们是白色的,应该是深灰色(#444444)。

例如,如果我点击“关于”链接并转到该页面,然后再次将鼠标悬停在“关于”菜单链接上,则颜色与其他未选择的菜单列表项不同。

我已经尝试了所有我能想到的将颜色变为灰色的东西 - 我知道这应该很简单(可能是)!

#nav 
{ position: absolute; 
  z-index: 300; 
  top: 72px; 
  right: 0; 
  }  
#nav ul {
  list-style: none; 
  margin: 0; 
  padding: 0; 
  }  
#nav ul li { 
  position: relative; 
  float: left; 
  padding: 75px 0 5px; 
  margin: 0 14px 0 0; 
  font-size: 18px; 
  font-weight: bold; 
  }  
#nav ul li a { 
  padding: 0 7px; 
  color: #444; 
  text-decoration: none;
  font-family:'ralewayregular',sans-serif;
  }  
#nav ul li a:hover, #nav ul li a:active, #nav ul li a:focus { 
  color: #931e74; 
  }  
#nav ul li.selected { 
  background: #d6a66d; 
  }  
#nav ul li.selected a { 
  color: #fff; 
  }  
#nav ul li em { 
  position: absolute; 
  left: -10001px; 
  top: -10001px; 
  }  
#nav ul li li { 
  float: none; 
  display: block; 
  padding: 0; 
  margin: 0; 
  border-top: 1px solid #fff; 
  font-size: 14px;color:#444; 
  }  
#nav ul li li:first-child { 
  border-top: 0;
  color:#444; 
  }  
#nav ul li li a { 
  float: none; 
  display: block; 
  padding: 11px 0; 
  color: #444; 
  }  
#nav ul li li.selected a { 
  color: #444;
  background:#F4E2CC; 
  }  
#nav ul li li a:hover, #nav ul li li a:active, #nav ul li li a:focus { 
  color: #a1117c;
  background-color:#F4E2CC; 
  }  

1 个答案:

答案 0 :(得分:1)

使用child selector仅为顶级链接应用白色。

#nav ul li.selected > a {
    color: #fff;
}