我正在我的网站上创建一个下拉菜单,除了一件事之外,或多或少成功地完成了任务.
当悬停在下拉菜单上时,主菜单链接的悬停状态会因为我不再悬停在其上而消失.
如何在悬停在下拉项目上时保持链接上的活动状态样式?
我已将代码复制到http://cssdesk.com/PZBM2,如果您将鼠标悬停在第一个列表项上,您将看到我正在谈论的悬停状态和下拉列表.
这是代码:
/*Main nav*/ .main_nav_container{ margin-top:10px; margin-bottom:10px; display:block; float:right; } ul.main_nav{ margin:0; padding:0; } ul.main_nav li{ display:inline-block; margin:0; padding:0; } ul.main_nav li a{ font-size:13px; display:block; font-weight:bold; position:relative; height:25px; line-height:25px; padding:0 13px; text-decoration:none; color:#1122cc; border:1px solid transparent; } ul.main_nav li a:hover{ text-decoration:underline !important; border-top:solid 1px #ccc; border-left:solid 1px #ccc; border-right:solid 1px #ccc; } ul.main_nav li ul{ display:none; position:absolute; background: #fff; margin:0; padding:0; border:solid 1px #ccc; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; } ul.main_nav li ul:hover #hover{ border:#ccc 1px solid; } ul.main_nav li ul li{ display:block; margin:0; padding:0; text-align:left; } ul.main_nav li ul li a{ font-weight:normal; } ul.main_nav li:hover ul{ display:inline; }
HTML
<div class="main_nav_container"> <ul class="main_nav"> <li> <a id="hover" href="#">For sale</a> <ul> <li><a href="#">Property for sale</a></li> <li><a href="#">New homes for sale</a></li> <li><a href="#">Find estate agents</a></li> </ul> </li> <li><a href="#">To rent</a></li> <li><a href="#">New homes</a></li> <li><a href="#">House prices</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Property advice</a></li> <li><a href="#">Contact</a></li> </ul> </div>
解决方法
你应该更换
ul.main_nav li a:hover{ text-decoration:underline !important; border-top:solid 1px #ccc; border-left:solid 1px #ccc; border-right:solid 1px #ccc; }
同
ul.main_nav li:hover{ text-decoration:underline !important; border-top:solid 1px #ccc; border-left:solid 1px #ccc; border-right:solid 1px #ccc; }
在你的CSS.请享用!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。