1

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

我尝试使用伪选择器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;
}
4

5 回答 5

1

样式 a's not li's，或者只是设置为所有 a's

a { color:inherit; text-decoration:none; }
于 2013-08-27T13:49:46.810 回答
0

只需创建一个适用于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

于 2013-08-27T13:40:33.140 回答
0

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

#menubar a {
    color: #whatevershadeofgrayhere;
    text-decoration: none;
}
#menubar a:hover {
    color: #whatevershadeofwhitehere;
}
于 2013-08-27T13:40:59.703 回答
0 
#menubar ul li:hover a{
    color:#fff;
}
于 2013-08-27T13:41:47.947 回答
0

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

#menubar ul li a {
    color: inherit;
}

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

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

菜单演示

小提琴

（顺便说一句不错的菜单）

于 2013-08-27T13:59:57.963 回答