- 试图在悬停时仅使服务链接橙色与灰色背景 - 如果不更改所有菜单项,就无法做到这一点。 将
鼠标悬停在服务上后,我无法单击示例链接。
.menu { margin:0; padding:0; } .menu ul { padding-top: 40px; padding-left: 0px; line-height: 0px; margin-bottom: 0px; float: right; } ul li { display: inline; } ul li a:visited { text-decoration: none; } ul li a:hover, .menu ul li .current{ color: #f7823b; } ul li { display: block; position: relative; float: left; } li ul { display: none; } ul li a { float: left; font-size: 20px; display: block; text-decoration: none; color: #ffffff; padding: 20px; margin-left: 1px; white-space: nowrap; } li:hover ul { display: block; } li:hover li { float: none; font-size: 11px; } ul ul li:hover a { background: #818285; } /*li:hover li a:hover { background: #818285; width:100%; }*/ ul ul { position: absolute; z-index: 500; margin:0; padding-top: 0px; } ul ul li a { padding: 20px 0px 20px 5px; width: 100%; background: #818285; }
<div class="socialmedia"> <a href="https://www.facebook.com/cyclonestrategies"><img class="button" src="http://lifeafterclass.com/cyclone/images/header/facebook.png" <="" img=""></a> <a href="https://twitter.com/CycloneStrategy"><img class="button" src="http://lifeafterclass.com/cyclone/images/header/twitter.png" <="" img=""></a> <a href="http://www.stumbleupon.com/stumbler/CyclonStrategies"> <img class="button" src="http://lifeafterclass.com/cyclone/images/header/stumbleupon.png" <="" img=""></a> <a href="http://www.linkedin.com/company/cyclone-strategies-llc"> <img class="button" src="http://lifeafterclass.com/cyclone/images/header/linkedin.png" <="" img=""></a> </div> <div class="menu"> <ul id="menu"> <li><a href="/">Home</a></li> <li><a href="/about-us"> About</a></li> <li class="special"><a href=""> Services</a> <ul> <li><a href="/digital-advertising">Digital Advertising</a></li> <li><a href="/promotion-management">Promotion Management</a></li> <li><a href="/social-media">Social Media</a></li> </ul> </li> <li><a href="/examples">Examples</a></li> <li><a href="/blog"> Blog</a> </li> <li><a href="contact-us"> Contact Us</a></li> </ul> </div> <div style="clear:both"></div> </div>
我已经尝试了一切 - 任何帮助都值得赞赏。谢谢!http://jsfiddle.net/8ARm5/
由于包含服务的li
具有类special
因此您可以使用它在悬停时定位元素。
.special:hover{
color: orange;
background: grey;
}
尝试将悬停在li
而不是a
元素上:
li:hover > a {
color: #f7823b;
}
这样做,即使您在子菜单中指向链接,链接也会保留样式定义。看一看:http://jsfiddle.net/8ARm5/5/