a:hover代码不会生效时怎么回事?
.wrapper_block{ width:1000px; margin:0 auto}
#main_nav{background:#bbd0f5; overflow:hidden; height:57px}
#main_nav ul{font-size:18px}
#main_nav ul li{float:right; overflow:hidden; margin:19px 0px 0px 69px}
#main_nav ul li .first{margin-left:250px}
#main_nav ul li a{ padding:18px 0}
#main_nav ul li a:link{ text-decoration:none}
#main_nav ul li a:visited{text-decoration:none}
#main_nav ul li a:hover{text-decoration:none; border-bottom:#ffbe00 2px solid}
<div id="main_nav">
<div class="wrapper_block">
<ul>
<li><a href="">机构列表</a></li>
<li><a href="">经典案例</a></li>
<li><a href="">新闻资讯</a></li>
<li><a href="">企业业绩</a></li>
<li><a href="">中星联丰</a></li>
<li class="first"><a href="">首页</a></li>
</ul>
</div>
</div>
#main_nav ul li a:hover{text-decoration:none; color:red; border-bottom:#ffbe00 2px solid}
鼠标移上去,能显示效果。
我想在字地下有一条线。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*reset*/ ul, li, div { margin: 0; padding: 0; } .nav-container { margin-top: 50px; height: 50px; background: #bbd0f5; } .nav-right { float: right; height: 50px; } .nav li { margin: 0; padding: 0; display: inline-block; width: 100px; text-align: center; line-height: 50px; } .nav li a { text-decoration: none; } .nav li:hover { line-height: 46px; /*让边框感觉在内部*/ border-bottom: 2px solid red; } </style> </head> <body> <div class="nav-container"> <div class="nav-right"> <ul class="nav"> <li><a href="">首页</a></li> <li><a href="">中星联丰</a></li> <li><a href="">企业业绩</a></li> <li><a href="">新闻资讯</a></li> <li><a href="">经典案例</a></li> <li><a href="">机构列表</a></li> </ul> </div> </div> </body> </html>
可参考一下。