Bueno, navegando un poco por la web me tope con un estilo que me gusto mucho, y la verdad no se mucho de css, y me intereso modificarlo para darle un estilo mas lindo a mi panel de administracion, el tema es que no me sale hacer que dentro de este estilo de menu que ya tengo, agregarle para que tenga menu desplegable.
Foto de lo que tengo hasta ahora:
Lo que quiero es que al pasar el cursor sobre "usuario", salgan desplegadas las opciones, hacia abajo, estube biendo
http://www.araudi.net/forosdelweb/menu_desplegable.html
Pero al tratar de adaptarlo a mi estilo , arruino el anterior, y en ves de desplegarse hacia abajo lo hace hacia un costado, aca esta mi codigo (va no es mio):
Style:
Código HTML:
* { margin: 0px;padding: 0px; outline: 0;}
html, body { width: 100%; background-color: #b9d1ea;}
img{ border: 0pt; }
#bottom_div{width: 1024px;clear:both;}
#vista_toolbar {float:left; font:normal 12px 'Trebuchet MS','Arial';margin:0;padding:0;width:1024px;background-image:url(back.gif);background-repeat:repeat-x;line-height:32px;list-style:none;}
#vista_toolbar ul {background-image:url(back.gif);background-repeat:repeat-x;float:left;line-height:32px;list-style:none;margin:0;padding:0 10px 0 10px;width:1000px;}
#vista_toolbar li {display:inline; padding:0;}
#vista_toolbar a {color:#FFF; float:left;padding:0 3px 0 3px; text-decoration:none;}
#vista_toolbar a span {display:block;float:none;padding:0 10px 0 7px;}
#vista_toolbar a span img {border:none;margin:8px 4px 0 0;}
#vista_toolbar a:hover{background: url(left.png) no-repeat left center;}
#vista_toolbar a:hover span {background:url(right.png) no-repeat right center;}
#vista_toolbar a.right {float:right; }
HTML:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Panel de Administracion</title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<link href="Data/style.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="vista_toolbar">
<ul>
<li><a href="#"><span><img align="left" src="Data/usuario.gif" alt="Usuarios" />Usuario</span></a></li>
<li><a class="right" href="#"><span><img align="left" src="Data/sos.gif" alt="help" />Help </span></a></li>
</ul>
</div>
<div id="bottom_div"></div>
</body>
</html>
Desde ya muchas gracias