3 replies [Last post]
eliana
Offline
newbie
Last seen: 7 years 48 weeks ago
Timezone: GMT-3
Joined: 2012-04-22
Posts: 3
Points: 4

Hi, I´m building a vertical menu in CSS, but I can´t get the a:hover to work, it´s just doing nothing. I´ve been searching and reviewing the code (I´m new to CSS), but can´t figure it out...if anyone has any suggestions, much appreciated Smile

Here´s the 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>

And 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;  
}  

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 3 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

Simplify your markup. There

Simplify your markup. There is no good reason for a div to hold the div that holds the list. The ul is already a container for list items. Notice, too, that the link text is normally capitalized. Use css to transform case.

In the stylesheet, don't repeat yourself on stuff that is inherited.

I didn't see the cause of your problem, but it could be just about any little thing. It is always a good idea to run your html and your css through the W3 validators.

    <ul id="main-menu">  
      <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>
=======================
      #main-menu {
        float: left;
        font-size: 11px;
        letter-spacing; 4px;
        line-height: 35px;
        list-style: none;
        margin: 0;
        padding: 0;
        text-align: right;
        width: 270px;
        }
 
      #main-menu li {
        }
 
      #main-menu a {
        color: #999;
        display: block;
        padding-right: 25px;
        text-decoration: none;
        text-transform: uppercase;
        }
 
      #main-menu a:hover {
        background: url(images/circle_grey.gif) right center no-repeat;
        font-weight: bold;
        padding-right: 50px;
        }
 
      #main-menu a.selected {
        background: url(images/circle.gif) right center no-repeat;
        color: #bc4c9b;
        font-weight: bold;
        padding-right: 50px;
        }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

eliana
Offline
newbie
Last seen: 7 years 48 weeks ago
Timezone: GMT-3
Joined: 2012-04-22
Posts: 3
Points: 4

Thanks Gary for the advice

Thanks Gary for the advice and corrections. I´ll post when I find where the problem is.

eliana
Offline
newbie
Last seen: 7 years 48 weeks ago
Timezone: GMT-3
Joined: 2012-04-22
Posts: 3
Points: 4

solved

I deleted the float:right that was both on .main_menu ul li a:hover and .main_menu ul li a.selected , and now the a:hover event is working fine Smile
Due to the float, the a:hover was overlapping on the a:selected without affecting the other li items