a: hover не работает над элементами меню li

Я создаю вертикальное меню в CSS, но я не могу заставить a: hover работать, он просто ничего не делает. I've был поиск и обзор кода (I'm новое CSS), но не могу понять это ... если у кого есть какие-либо предложения, высоко ценится :)a: hover не работает над элементами меню li

Here's 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>

источник

2012-04-22 eliana

Просто тестирование кода и событие парения, кажется, работает хорошо для меня, что именно не работает? –

Привет, спасибо за тестирование. Он не выполняет ни шрифта, ни загрузки изображения. Я заметил, что если я ставил 'a.selected' перед' a.hover', он применяет a: hover, стоящий над выбранным элементом, не затрагивая других (что противоположно тому, что я пытаюсь сделать, но могу дать понять, что происходит). Может быть, я не понимаю, как использовать a: hover? Я думал, что он будет указывать стиль для всех элементов li, кроме того, который имеет выбранный класс в качестве имени. – eliana

Взгляните на эту демонстрацию, которую я установил, событие ': hover' работает нормально (я удалил объявления' float: left', поскольку они мешали нескольким вещам только для тестирования). http://jsfiddle.net/stMZv/1/ –

меню в настоящее время перемещается влево на зависании, а также на .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-23 14:35:05

a: hover не работает над элементами меню li

ответ

Смежные вопросы