menú desplegable y css

[reyvolsam]

Mejor te doy un codigo un poco mas sencillo:

Código HTML:

<div class="menuContainer">
 
<ul id="menu">
    <li><a href="#">Progamación <img src="arrow.png" width="12" height="12" alt="desplegable" /></a>
        <ul>
            <li><a href="#">PHP</a></li>
            <li><a href="#">ASP</a></li>
            <li><a href="#">JavaScript</a></li>
        </ul>
    </li>
    
    <li><a href="#">SEO</a></li>
    
    <li><a href="#">Diseño <img src="arrow.png" width="12" height="12" alt="desplegable" /></a>
        <ul>
            <li><a href="#">Interfaz</a></li>
            <li><a href="#">Plantillas</a></li>
      </ul>
    </li>
    <li><a href="#">Publicidad</a></li>
    <li><a href="#">Contacto</a></li>
</ul>
<div class="clear"></div>
</div>
 

Código CSS:

.clear{
    clear:both;
    }
img{
    border:none;
    }
/*
** Menu
*/
.menuContainer{
    background:#09F;
    }
ul#menu a:hover, ul#menu ul, ul#menu li:hover{
    background:#F90;
    } 
.menuContainer ul{
    list-style:none;    
    margin:0;
    padding:0;
    }
ul#menu li{
    float:left;
    position:relative;
    margin-right:10px;
    }
ul#menu a{
    color:#FFF;
    text-decoration:none;
    padding:10px;
    display:block;
    }
ul#menu ul{
    position:absolute;
    left:0;
    display:none;
    }
ul#menu li:hover ul{
    display:block;
}
ul#menu li:hover ul li{
    margin:0;
}
ul#menu li:hover ul li a{
    width:150px;
    }
ul#menu li:hover ul a:hover{
    background:#0C3;
}
 

Espero te sirva!!!