Entrar

menu desplegable ayuda

bajeja182 · · Solicitar retirada
quieor crear un menu desplegable con el css y el html , cuando ponga el mouse sobre el link se despliege una lista .. x mas q intento no me sale .. ayuda paso a paso xfavor
codomodragon · · Solicitar retirada
amigo eso se hace con los códigos que te daré a continuación. Pero hay 1 solo defecto, como cosa rara IE no los ejecuta, así que utilizaremos un truco usando un script para IE.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<!--[if IE]>
<script type="text/javascript" src="http://www.mangasve.com.ve/cctw/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://www.mangasve.com.ve/cctw/superfish.js"></script>
<script type="text/javascript"> 
	jQuery(function(){
			jQuery('ul.sf-menu').superfish(); 
		});
</script>
<![endif]-->

</head>
<body>
<div id='cat'>
	<ul class='sf-menu'>
		<li>
      <a href='url del menu' title='nombre del menu'>lo que vemos</a><!--menu sin desplegable--> 
		</li>
		<li>
			<a href='url del menu' title='nombre del menu'>lo que vemos</a><!--menu con desplegable-->
			<ul class='children'>
				<li>
					<a href='url del desplegable' title='titulo del desplegable'>lo que vemos en el desplegable</a>
				</li>
			</ul>
  </ul>
</div>
</body>
</html>
Y ponemos esto en el css
.sf-menu ul {
	position:		absolute;
	top:			-999em;
	width:			10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
	width:			100%;
}
.sf-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
	float:			left;
	position:		relative;
}
.sf-menu a {
	display:		block;
	position:		relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:			0;
	top:			30px; /* match top ul list item height */
	z-index:		150;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left:			5em; /* match ul width */
	top:			0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:			5em; /* match ul width */
	top:			0;
}
hr
{
	color: #D4D4D4;
	background-color: #D4D4D4;
	height: 1px;
	border: none;
}
.field
{
	font-family: tahoma, verdana, arial, helvetica;
	font-size: 11px;
	color: #626278;
	width: 100px;
        margin: 6px  10px
}
.button
{
	font-family: tahoma, verdana, arial, helvetica;
	font-size: 11px;
	width: 40px;
}
.form_table
{
	width: 150px;
}
.form_td_left
{
	width: 40px;
}
.form_td_right
{
	width: 40px;
}

Por ultimo para darle color al menú lo hacemos con la hoja de estilos como si fiera cualquier otra capa.

ahora solo te falta pasar los códigos y listo, suerte amigo.

Si te pareció útil mi post, ponme un punto de reputación por favor ^_^
http://www.comocreartuweb.com/consultas/reputation.php?do=addreputa…