Problemas con menu en css
Tengo un código de un menu desplegable, consta de un código html y otro css:
Código html:
<html>
<head>
<title>
</title>
<link rel="stylesheet" type="text/css" href="./estilos/menudesplegable3.css">
</head>
<body style="
font-family: arial;
font-size: 12px;
">
<!-- CODIGO DESPLEGABLE-->
<div style ="
position: relative;
left: 50px;
top: 50px;
height: 150px;
width: 350px;
background-color:#FF0000;
">
<!-- CÓDIGO DESPLEGABLE-->
<div id="desplegable2" class="menu">
<ul>
<!-- Primera columna-->
<li>
<a href=""title="">
menu 1
</a>
<ul>
<li>
<a href="" title="">
OPCIÓN 1
</a>
</li>
<li>
<a href="" title="">
OPCIÓN 2
</a>
</li>
<li>
<a href="" title="">
OPCIÓN 3
</a>
</li>
</ul>
</li>
<!-- Fin primera columna-->
<!-- Segunda columna-->
<li>
<a href=""title="">
menu 2
</a>
<ul>
<li>
<a href="" title="">
OPCIÓN 1
</a>
</li>
<li>
<a href="" title="">
OPCIÓN 2
</a>
</li>
<li>
<a href="" title="">
OPCIÓN 3
</a>
</li>
</ul>
</li>
<!-- Fin segunda columna-->
</ul>
<!-- FINAL DIV desplegable2-->
<!-- FINAL DIV desplegable1-->
</div>
<!-- FIN CÓDIGO DESPLEGABLE-->
</div>
</body>
</html>
Código css:
.menu li{
float:left; /* cambia menu de persiana a lineal */
width:130px; /* ajusta el ancho de la columna */
}
.menu li a{
/* coloca de color blanco las separaciones de las columnas */
border-right:#FFFFFF solid 1px;
background:#ad59b9;
/* pone color a la cabezera del menu */
color:#ffffff;
display:block;
font-weight:normal;
line-height:25px;
text-align:center;
text-decoration:none;
}
/* pone la linea verde al seleccionar */
.menu li a:hover,.menu ul li:hover a{
background:#9cd14b;
}
.menu li ul{
background:#ad59b9;
display:none;
padding:0px;
/* ajusta el ancho de las opciones del desplegable */
width:130px;
z-index:200;
}
/* elimina las opciones persianas del menu */
.menu li:hover ul{
display:block;
}
/* al desplegar la persiana te pone las opciones de izquierda a derecha */
.menu li li{
display:block;
float:none;
width:auto;
}
/* si se quita la persiana la pone de verde */
.menu li:hover li a{
background:none;
}
/* si se quita te centra toda la persiana al ancho de la opcion mas larga */
.menu li ul a{
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover,.menu li ul li:hover a{
background:#9cd14b;
color:#ffffff;
}
La cosa es que quiero posicionar al margen izquierdo del div rojo mi menu desplegable y también poder posicionarlo donde quiera arriba o abajo... En resumen, colocar donde quiera mi menu desplegable dentro del área del div rojo
1 Respuesta
Es lo que pensé, pero como no sabia como hacerlo colgué la duda...
Modifique parte del código html en el div que recoge el desplegable de esta forma:
<div style ="
position: relative;
left: 50px;
top: 50px;
height: 26px;
width: 1060px;
background-color:#FF0000;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left:0px
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px
">
Pero no sirvió de nada, no hace lo que deseo.
No, lo estas haciendo mal, te explico.
El "margin" vendría siendo el espaciado externo (respecto a los demás que tenga a sus lados) que quieres que tenga tu objeto, es decir, la separación a la derecha, a la izquierda, arriba o abajo.
El "padding" es similar pero internamente en el objeto respecto a su borde.
A estos parámetros debes darle valores, sino quedará tal cual porque por defecto es cero (0).
Ejemplo:
margin-top: 10px; /*Mueve el objeto hacia abajo 10px*/
ó
margin-top: -10px; /*Mueve el objeto hacia arriba 10px*/
Entonces debes ir jugando con estos valores hasta obtener lo que quieres, lo mismo funciona para el padding (positivo o negativo).
http://web.tursos.com/como-hacer-un-menu-desplegable-multinivel-usando-solo-css/
