Question

此菜单栏可以正常工作，直到涉及超链接，因为浏览器会插入自己的文本格式。

我尝试使用伪选择器（a:link a:visited）来抵消这种情况，但这会阻止我已经创建的样式显示，（因为我希望文本在悬停时从灰色变为白色）。我也试过#menubar ul li a:link{}但没有用。如何防止链接在列表中时更改颜色？

在这里小提琴：http://jsfiddle.net/CWB9C/1/

HTML：

<div id="menubar">
    <ul>
        <li><a href="index.html"> Home</a>
        </li>
        <li><a href="www.facebook.com">Facebook</a>

            <ul>
                <li><a href="www.one.com">One</a>
                </li>
                <li><a href="www.two.com">Two</a>
                </li>
                <li><a href="www.three.com">Three</a>
                </li>
            </ul>
        </li>
        <li><a href="www.google.com">Google.com </a>

            <ul>
                <li><a href="www.one.com">One</a>
                </li>
                <li><a href="www.two.com">Two</a>
                </li>
                <li><a href="www.three.com">Three</a>
                </li>
            </ul>
        </li>
        <li>Search</li>
    </ul>
</div>

CSS：

body {
  text-align: center;
}


#menubar ul{
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
}


#menubar ul li{
  font: 18px;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  color:#666;
  text-decoration:none;
}

#menubar ul li{
  font: 18px;
  font-family: latolight;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
}

#menubar ul li:hover {
    background: #A03C3A;
    color: #D6D6D6;
}

#menubar ul li ul{
  padding: 0;
  position: absolute;
  top: 43px;
  left: 0;
  width: 150px;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  color:#666;
  text-decoration:none;
}

#menubar ul li ul {
  padding: 0;
  position: absolute;
  top: 43px;
  left: 0;
  width: 150px;
  display: none;
  opacity: 0;
  visibility: hidden;
}
#menubar ul li ul li { 
background:#A03C3A;
  display: block; 
  color: #FFF;
}

#menubar ul li ul li { 
background:#A03C3A;
  display: block; 
  color: #FFF;
  text-shadow: 0 -1px 0 #000;
  z-index:10;
   color:#666;
  text-decoration:none;
}

#menubar ul li ul li:hover {
    background:#4F529F; z-index:10;
}

#menubar ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
  z-index:10;
}

Answer 1

设置a不是li的样式，或者只设置为a的所有

a { color:inherit; text-decoration:none; }

Answer 2

只需创建适用于li和li > a的样式：

#menubar ul li, #menubar ul li a {
    color:#666;
    font: 18px;
    font-family: latolight;
    text-decoration: none; 
    /* Add whatever additional style you want */
}

jsFiddle

Answer 3

从我正在阅读的内容来看，我认为这就是你想要的

#menubar a {
    color: #whatevershadeofgrayhere;
    text-decoration: none;
}
#menubar a:hover {
    color: #whatevershadeofwhitehere;
}

Answer 4

#menubar ul li:hover a{
    color:#fff;
}

Answer 5

您可以使用颜色的继承值。

#menubar ul li a {
    color: inherit;
}

然后它将从具有颜色样式的最近父级继承。然后你可以为颜色做这样的事情。

#menubar ul li ul li {
    color: black;
}

menu demo

fiddle

（顺便说一下漂亮的菜单）

在不改变悬停CSS的情况下更改列表中链接的颜色

5 个答案:

fiddle