Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Menu desplegable solamente con CSS y algunas especificaciones

Estas en el tema de Menu desplegable solamente con CSS y algunas especificaciones en el foro de CSS en Foros del Web. He tenido problemas al realizar una menú desplegable debido a que por el momento lo quiero hacer con css solamente. Quiero hacer un menu desplegable ...
  #1 (permalink)  
Antiguo 27/09/2013, 06:23
Avatar de fegm_4  
Fecha de Ingreso: febrero-2013
Mensajes: 114
Antigüedad: 11 años, 9 meses
Puntos: 8
Pregunta Menu desplegable solamente con CSS y algunas especificaciones

He tenido problemas al realizar una menú desplegable debido a que por el momento lo quiero hacer con css solamente. Quiero hacer un menu desplegable en el cual se muestren los sub menus de diferente color. Por el momento he conseguido que se agregue una línea de color distindo a la derecha del primer menu, pero quisiera que los submenues "heredaran" el color de esa línea en su fondo.

Al momento tengo lo siguiente en mi archivo php

Código HTML:
Ver original
  1. <div id="menu">
  2. <ul>
  3.    <li><a href='index.html'><span>Home</span></a></li>
  4.    <li class='has-sub'><a href='#'><span>Products</span></a>
  5.       <ul>
  6.          <li class='has-sub'><a href='#'><span>Product 1</span></a>
  7.             <ul>
  8.                <li><a href='#'><span>Sub Item</span></a></li>
  9.                <li class='last'><a href='#'><span>Sub Item</span></a></li>
  10.             </ul>
  11.          </li>
  12.          <li class='has-sub'><a href='#'><span>Product 2</span></a>
  13.             <ul>
  14.                <li><a href='#'><span>Sub Item</span></a></li>
  15.                <li class='last'><a href='#'><span>Sub Item</span></a></li>
  16.             </ul>
  17.          </li>
  18.       </ul>
  19.    </li>
  20.    <li class='has-sub'><a href='#'><span>Products</span></a>
  21.       <ul>
  22.          <li class='has-sub'><a href='#'><span>Product 1</span></a>
  23.             <ul>
  24.                <li><a href='#'><span>Sub Item</span></a></li>
  25.                <li class='last'><a href='#'><span>Sub Item</span></a></li>
  26.             </ul>
  27.          </li>
  28.          <li class='has-sub'><a href='#'><span>Product 2</span></a>
  29.             <ul>
  30.                <li><a href='#'><span>Sub Item</span></a></li>
  31.                <li class='last'><a href='#'><span>Sub Item</span></a></li>
  32.             </ul>
  33.          </li>
  34.       </ul>
  35.    </li>
  36.    <li class='has-sub'><a href='#'><span>Products</span></a>
  37.       <ul>
  38.          <li class='has-sub'><a href='#'><span>Product 1</span></a>
  39.             <ul>
  40.                <li><a href='#'><span>Sub Item</span></a></li>
  41.                <li class='last'><a href='#'><span>Sub Item</span></a></li>
  42.             </ul>
  43.          </li>
  44.          <li class='has-sub'><a href='#'><span>Product 2</span></a>
  45.             <ul>
  46.                <li><a href='#'><span>Sub Item</span></a></li>
  47.                <li class='last'><a href='#'><span>Sub Item</span></a></li>
  48.             </ul>
  49.          </li>
  50.       </ul>
  51.    </li>
  52.    <li><a href='#'><span>About</span></a></li>
  53.    <li class='last'><a href='#'><span>Contact</span></a></li>
  54.    <li class='has-sub'><a href='#'><span>Products</span></a>
  55.       <ul>
  56.          <li class='has-sub'><a href='#'><span>Product 1</span></a>
  57.             <ul>
  58.                <li><a href='#'><span>Sub Item</span></a></li>
  59.                <li class='last'><a href='#'><span>Sub Item</span></a></li>
  60.             </ul>
  61.          </li>
  62.          <li class='has-sub'><a href='#'><span>Product 2</span></a>
  63.             <ul>
  64.                <li><a href='#'><span>Sub Item</span></a></li>
  65.                <li class='last'><a href='#'><span>Sub Item</span></a></li>
  66.             </ul>
  67.          </li>
  68.       </ul>
  69.    </li>
  70. </ul>
  71. </div>

y mi archivo CSS es el siguiente
Código CSS:
Ver original
  1. #menu ul, #menu li, #menu a, #menu span{
  2.     margin: 0;
  3.     padding: 0;
  4.     position: relative;
  5. }
  6.  
  7. #menu{
  8.     height: 32px;
  9.     width: auto;
  10.     /*border-bottom: 2px solid #FFC976;*/
  11. }
  12.  
  13. #menu:after, #menu ul:after{
  14.     content: '';
  15.     display: block;
  16.     clear: both;
  17. }
  18. #menu a{
  19.     color: #000;
  20.     display: inline-block;
  21.     line-height: 32px;
  22.     padding: 0 20px;
  23.     text-decoration: none;
  24. }
  25. #menu ul{
  26.     list-style: none;
  27. }
  28. #menu > ul{
  29.     float:left;
  30. }
  31. #menu > ul > li{
  32.     float: left;
  33. }
  34. #menu > ul > li > a{
  35.     font-size: 14px;
  36.     font-weight: normal;
  37.     text-transform: uppercase;
  38.     text-shadow:#CCC 0.1em 0.1em 0.3em;
  39.     filter: progid:DXImageTransform.Microsoft.Shadow(color='#CCC', Direction=135, Strength=4);
  40.     color: #00498A;
  41. }
  42. #menu > ul > li:nth-child(1):hover:before{
  43.     content: '';
  44.     display: block;
  45.     width: 0;
  46.     height: 32px;
  47.     position: absolute;
  48.     border-left: 3px solid #009B00;
  49. }
  50. #menu > ul > li:nth-child(2):hover:before{
  51.     content: '';
  52.     display: block;
  53.     width: 0;
  54.     height: 32px;
  55.     position: absolute;
  56.     border-left: 3px solid #0065A8;
  57. }
  58. #menu > ul > li:nth-child(3):hover:before{
  59.     content: '';
  60.     display: block;
  61.     width: 0;
  62.     height: 32px;
  63.     position: absolute;
  64.     border-left: 3px solid #F6D500;
  65. }
  66. #menu > ul > li:nth-child(4):hover:before{
  67.     content: '';
  68.     display: block;
  69.     width: 0;
  70.     height: 32px;
  71.     position: absolute;
  72.     border-left: 3px solid #F38435;
  73. }
  74. #menu > ul > li:nth-child(5):hover:before{
  75.     content: '';
  76.     display: block;
  77.     width: 0;
  78.     height: 32px;
  79.     position: absolute;
  80.     border-left: 3px solid #EE0000;
  81. }
  82. #menu > ul > li:nth-child(6):hover:before{
  83.     content: '';
  84.     display: block;
  85.     width: 0;
  86.     height: 32px;
  87.     position: absolute;
  88.     border-left: 3px solid #814F7D;
  89. }
  90. #menu > ul > li:nth-child(7):hover:before{
  91.     content: '';
  92.     display: block;
  93.     width: 0;
  94.     height: 32px;
  95.     position: absolute;
  96.     border-left: 3px solid #545454;
  97. }
  98. #menu .has-sub{
  99.     z-index:1;
  100. }
  101. #menu .has-sub:hover > ul{
  102.     display: block;
  103. }
  104. #menu .has-sub ul{
  105.     display: none;
  106.     position: absolute;
  107.     width: 150px;
  108.     top: 100%;
  109.     left: 0;
  110. }
  111. #menu .has-sub ul li{
  112.     *margin-bottom: -1px;
  113. }
  114. #menu .has-sub ul li a {
  115.     background: #0074d9;
  116.     border-bottom: 1px dotted #0d8eff;
  117.     filter: none;
  118.     font-size: 14px;
  119.     display: block;
  120.     line-height: 120%;
  121.     padding: 10px;
  122.     color: #ffffff;
  123.     font-weight: normal;
  124. }
  125. #menu .has-sub ul li:hover a {
  126.   background: #0059a6;
  127. }
  128. #menu .has-sub .has-sub:hover > ul {
  129.   display: block;
  130. }
  131. #menu .has-sub .has-sub ul {
  132.   display: none;
  133.   position: absolute;
  134.   left: 100%;
  135.   top: 0;
  136.   min-width: 150px;;
  137. }
  138. #menu .has-sub .has-sub ul li a {
  139.   background: #0059a6;
  140.   border-bottom: 1px dotted #0d8eff;
  141. }
  142. #menu .has-sub .has-sub ul li a:hover {
  143.   background: #004b8d;
  144. }

Espero puedan ayudarme. Gracias!
__________________
--
Aqui fegm_4
  #2 (permalink)  
Antiguo 27/09/2013, 09:39
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 3 meses
Puntos: 2114
Respuesta: Menu desplegable solamente con CSS y algunas especificaciones

Usa el inspeccionador de elementos, a ver qué regla está afectando. Si tienes en tu CSS algo del tipo:

Código CSS:
Ver original
  1. a {
  2.   color: red;
  3. }

Entonces va a sobreescribir el color heredado.
  #3 (permalink)  
Antiguo 27/09/2013, 10:15
Avatar de fegm_4  
Fecha de Ingreso: febrero-2013
Mensajes: 114
Antigüedad: 11 años, 9 meses
Puntos: 8
Respuesta: Menu desplegable solamente con CSS y algunas especificaciones

No entiendo. Estoy revisando el inspector pero no veo nada de extraño. El problema es que no se como cambiar ese azul que aparece debajo de cada ul.has-sub.

Quisiera saber como puedo seleccionar ese elemento con una pseudo clase y que reciba el color del background de la linea de que bordea al padre
__________________
--
Aqui fegm_4
  #4 (permalink)  
Antiguo 27/09/2013, 10:35
Avatar de fegm_4  
Fecha de Ingreso: febrero-2013
Mensajes: 114
Antigüedad: 11 años, 9 meses
Puntos: 8
Respuesta: Menu desplegable solamente con CSS y algunas especificaciones

Creo que graficamente se ve mejor. Quiero hacer esto

y por el momento solo he podido hacer la linea de color
__________________
--
Aqui fegm_4
  #5 (permalink)  
Antiguo 27/09/2013, 10:43
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 3 meses
Puntos: 2114
Respuesta: Menu desplegable solamente con CSS y algunas especificaciones

Es que no es lo mismo hablar de un color que de un color de fondo, ya que el color si se hereda, pero no el del fondo.

Eso lo tendrás que indicar en cada caso.

Código CSS:
Ver original
  1. #menu > ul > li:nth-child(1) li {
  2.   background-color: green;
  3. }
  4.  
  5. #menu > ul > li:nth-child(1) li li {
  6.   background-color: forestgreen;
  7. }

Aunque yo le pondría una clase a cada li principal, porque si no te van a quedar unos selectores muy muy feos.

Código HTML:
Ver original
  1. <li class="verde">

Código CSS:
Ver original
  1. li.verde li {
  2.   background-color: green;
  3. }
  4.  
  5. li.verde li li {
  6.   background-color: forestgreen;
  7. }
  #6 (permalink)  
Antiguo 27/09/2013, 13:37
Avatar de fegm_4  
Fecha de Ingreso: febrero-2013
Mensajes: 114
Antigüedad: 11 años, 9 meses
Puntos: 8
Respuesta: Menu desplegable solamente con CSS y algunas especificaciones

Caray! Me doy cuenta que tengo mucho que aprender de este asunto de CSS. Muchas gracias! ha resultado perfecto!
__________________
--
Aqui fegm_4

Etiquetas: menu-desplegable
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:17.