a:悬停不在菜单li项目上工作

时间:2012-04-22 03:41:42

标签: css menu

我正在CSS中构建一个垂直菜单,但我无法得到a:悬停上班,它什么也没做。我一直在搜索和查看代码(我是CSS的新手),但无法弄清楚......如果有人有任何建议,非常感谢:)

这是CSS:

.menu_container{
position: absolute;
float: left;
width: 270px;
margin-top: 220px;  
}
.main_menu ul { 
padding: 0px; 
margin:0px;
list-style-type: none;  
}
.main_menu ul li {
padding-right: 25px;
font-family:Arial, Helvetica, sans-serif; 
font-size:11px; 
letter-spacing:4px;
text-align:right; 
line-height:35px;  
list-style-type:none;  
}
.main_menu ul li a  {  
text-decoration:none;  
color:#999;  
} 
.main_menu ul li a:hover {
text-decoration:none;  
color:#999;  
font-weight:bold;  
background:url(images/circle_grey.gif) right center no-repeat;
padding-right: 25px; 
float:right;
}   
.main_menu ul li a.selected  {
background: url(images/circle.gif) right center no-repeat;
padding-right: 25px; 
float:right;
color: #bc4c9b;
font-weight:bold;  
}  

HTML:

<div class="menu_container">
<div class="main_menu">  
<ul>  
<li><a href="index.html">HOME</a></li>  
<li><a href="quienes_somos.html" class="selected" >QUIÉNES SOMOS</a></li>  
<li><a href="consultoria.html">Consultoría</a></li>  
<li><a href="capacitacion.html">Capacitación</a></li>  
<li><a href="academico.html">Académico / ARTÍCULOS</a></li>  
<li><a href="alianzas.html">Alianzas</a></li> 
<li><a href="proyectos.html">Proyectos</a></li>  
<li><a href="contacto.html">Contacto</a></li>   
</ul>  
</div> 
</div>

1 个答案:

答案 0 :(得分:0)

菜单在悬停时向左浮动,也在.selected类上浮动,这就是造成问题的原因。以下是删除了float属性的固定类:

.main_menu ul li a:hover {
  text-decoration:none;  
  color:#999;  
  font-weight:bold;  
  background:url(images/circle_grey.gif) right center no-repeat;
  padding-right: 25px; 
}

.main_menu ul li a.selected  {
  background: url(images/circle.gif) right center no-repeat;
  padding-right: 25px; 
  color: #bc4c9b;
  font-weight:bold;  
}