Tema: Menu desplegable, problema al desplegar
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 26/11/2013, 06:00
legended
 
Fecha de Ingreso: septiembre-2011
Mensajes: 12
Antigüedad: 13 años, 3 meses
Puntos: 1
Pregunta Menu desplegable, problema al desplegar
Hola a todos, espero puedan iluminarme un poco ya que no soy muy bueno con css.

Maquete este menu esta casi terminado, cuando se despliega el menu tiene una leve rotacion, con lo cual me quedan espacios vacios, cuando paso el mouse sobre estos espacios el menu tiende a guardarse.

Trate de que el ul que contiene el li quede de fondo para mantenerlo con la propiedad :hover, pero al ser absoluto no se dimensiona.

Código HTML:
<!DOCTYPE html>
<html lang="es">
	<head>
		<title>menu</title>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<nav>
			<ul>
			   <li>
			   		<a href="#">MUNDO AM</a>
					<ul>
						<li><a href="#">ZONA FANS</a></li>
						<li><a href="#">DESCARGA</a></li>
						<li><a href="#">CONCURSOS</a></li>
						<li><a href="#">BIOGRAFÍA</a></li>
					</ul>
				</li>
				<li >
					<a href="#">GALERÍA</a>
					<ul>
						<li><a href="#">IMÁGENES</a></li>
						<li><a href="#">VIDEOS</a></li>
					</ul>
				</li>
				<li><a href="#">NOTICIAS</a></li>
				<li><a href="#">CONTACTO</a></li>
			</ul>
		</nav>
	</body>
</html>
Código CSS: 
Ver original
  1. *{
  2.     padding: 0;
  3.     margin: 0;
  4.     border: 0;
  5. }
  6.  
  7. body{
  8.     margin:auto;
  9.     width:800px;
  10.     font-family:arial;
  11. }
  12.  
  13. nav ul{
  14.     list-style: none;
  15. }
  16. nav{
  17.     position: relative;
  18. }
  19.  
  20. nav ul li a{
  21.     text-decoration: none;
  22.     display: block;
  23.     text-align: center;
  24.     padding: 10px;
  25.     color: #fff;
  26. }
  27.  
  28. nav > ul > li{
  29.     float: left;
  30.     min-width: 170px; 
  31.     background-color: #812669;
  32.     position: relative;
  33. }
  34.  
  35. nav > ul > li + li{
  36.     background-color: #B43491;
  37. }
  38.  
  39. nav > ul > li + li + li{
  40.     background-color: #AD88BB;
  41. }
  42.  
  43. nav > ul > li + li + li + li{
  44.     background-color: #9C75AC;
  45. }
  46.  
  47. nav > ul > li > ul > li{
  48.     min-width: 170px;
  49.     position: absolute;
  50.     top:0px;
  51.     z-index: -1;
  52.     transition: all 300ms ease 0ms;
  53. }
  54.  
  55. nav > ul > li > ul > li + li{
  56.     position: absolute;
  57.     z-index: -2;
  58.     transition: all 300ms ease 100ms;
  59. }
  60.  
  61. nav > ul > li > ul > li + li + li{
  62.     position: absolute;
  63.     z-index: -3;
  64.     transition: all 300ms ease 200ms;
  65. }
  66.  
  67. nav > ul > li > ul > li + li + li + li{
  68.      
  69.     position: absolute;
  70.     z-index: -4;
  71.     transition: all 300ms ease 300ms;
  72. }
  73.  
  74. nav > ul > li > ul > li > a{
  75.     background-color: #EEEEEE;
  76.     color: #812669;
  77. }
  78.  
  79. nav > ul > li > ul > li > a:hover{
  80.     color: #FFF;
  81.     background-color: #812669;
  82. }
  83.  
  84. nav > ul > li:hover > ul > li{
  85.     transition: all 300ms ease 300ms;
  86.     top:45px;
  87. }
  88. nav > ul > li:hover > ul > li + li{
  89.     transition: all 300ms ease 200ms;
  90.     top:90px;
  91. }
  92. nav > ul > li:hover > ul > li + li + li{
  93.     transition: all 300ms ease 100ms;
  94.     top:135px;
  95. }
  96. nav > ul > li:hover > ul > li + li + li + li{
  97.     transition: all 300ms ease 0ms;
  98.     top:180px;
  99. }
  100.  
  101. nav ul ul li a{
  102.     transform: rotate(-2deg);
  103. }
  104.  
  105. nav ul ul li + li a{
  106.     transform: rotate(3deg);
  107. }
  108.  
  109. nav ul ul li + li + li a{
  110.     transform: rotate(-5deg);
  111. }
  112.  
  113. nav ul ul li + li + li + li a{
  114.     transform: rotate(2deg);
  115. }

Muchas gracias de antemano!