0

CSS で垂直メニューを作成していますが、a:hover が機能しません。何もしていません。私はコードを検索してレビューしてきました（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>
4

1 に答える 1

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;  
}
于 2012-04-23T14:35:05.917 に答える