当你将鼠标悬停在sub-v菜单文本上时,我很难让它改变颜色。我试图构建的是一个具有sub-v的导航菜单。子控件链接的悬停状态会更改背景颜色和文本颜色。我还没能做到这一点,目前只有滚动时的背景变化,而不是文本。
以下是导航示例的链接:http://confinedfoodie.com/test/contact.html可以在"我们做什么"中的"视频帖子"下找到子级别。
这是HTML:
<nav id="primary-nav"><!-- Navigation -->
<ul>
<li><a href="#nowhere">WHAT WE DO</a><!-- what we do -->
<ul><!-- hidden links level 1 -->
<li><a href="radio-production.html">Radio Production</a></li>
<li><a href="voice-casting.html">Voice Casting</a></li>
<li><a href="#nowhere">Video Post</a><!-- video post -->
<ul style="width:170px;"><!-- hidden links level 2 -->
<li ><a href="mix-to-picture.html">Mix to Picture</a></li>
<li><a href="adr-film-tv.html">ADR for Film & TV</a></li>
</ul><!-- End hidden links level 2 -->
</li><!-- END video post -->
<li><a href="isdn-services.html">ISDN Services</a></li>
<li><a href="pharma.html">Pharmaceutical</a></li>
<li><a href="audio-books.html">Audio Books</a></li>
</ul><!-- End hidden links level 1 -->
</li><!-- END what we do -->
</ul>
</nav><!-- /Navigation -->
这是CSS:
nav ul ul li a {
padding: 5px 10px;
color: #c8c8c8;
}
nav ul ul li a:hover {
color: #fff;
background: #2b191c;
}
如有任何帮助,我们将不胜感激,提前表示感谢。
样式优先级有点问题。
你已经有了这个风格选择器集,我想它涵盖了所有其他链接:
nav ul li:hover a
由于第二个无序列表位于第一个无序列表的<li>
中,因此它的元素也继承了这种样式。
之后,您还可以获得:
li:hover a
这是更广泛的,并再次与你想要的风格重叠。
这两个声明具有优先权,因为它们位于一个单独的样式表中,该样式表在具有更特定样式的样式表之后加载。
你有两种选择,最好的是重新优化你的所有风格,这样就不会有重叠,也不会有风格相互争斗的机会。这意味着创建更少、更具体的样式,从而更有效地覆盖您的网站。使用>
选择器的nav ul li:hover > a
之类的东西可能很有用。
或者,您可以尝试移动样式,以便按顺序给出正确的优先级。(我还没有检查订单是否是唯一的影响因素,所以如果简单地移动样式不起作用,你可能无论如何都必须进行一些重新优化)
您的项目在我使用您的确切代码制作的JSFiddle中运行良好。我认为您的问题是您可能没有将css文件链接到HTML。这里有一个例子:
http://jsfiddle.net/ym2cL/
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
http://www.w3schools.com/css/css_howto.asp