[SOLUCIONADO] Menu desplegable solamente con CSS y algunas especificaciones

[fegm_4]

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:

<div id="menu">
<ul>
   <li><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>
</div>
 

y mi archivo CSS es el siguiente

Código CSS:

#menu ul, #menu li, #menu a, #menu span{
    margin: 0;
    padding: 0;
    position: relative;
}
 
#menu{
    height: 32px;
    width: auto;
    /*border-bottom: 2px solid #FFC976;*/
}
 
#menu:after, #menu ul:after{
    content: '';
    display: block;
    clear: both;
}
#menu a{
    color: #000;
    display: inline-block;
    line-height: 32px;
    padding: 0 20px;
    text-decoration: none;
}
#menu ul{
    list-style: none;
}
#menu > ul{
    float:left;
}
#menu > ul > li{
    float: left;
}
#menu > ul > li > a{
    font-size: 14px;
    font-weight: normal;
    text-transform: uppercase;
    text-shadow:#CCC 0.1em 0.1em 0.3em;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#CCC', Direction=135, Strength=4);
    color: #00498A; 
}
#menu > ul > li:nth-child(1):hover:before{
    content: '';
    display: block;
    width: 0; 
    height: 32px; 
    position: absolute;
    border-left: 3px solid #009B00;
}
#menu > ul > li:nth-child(2):hover:before{
    content: '';
    display: block;
    width: 0; 
    height: 32px;
    position: absolute;
    border-left: 3px solid #0065A8;
}
#menu > ul > li:nth-child(3):hover:before{
    content: '';
    display: block;
    width: 0; 
    height: 32px; 
    position: absolute;
    border-left: 3px solid #F6D500;
}
#menu > ul > li:nth-child(4):hover:before{
    content: '';
    display: block;
    width: 0; 
    height: 32px; 
    position: absolute;
    border-left: 3px solid #F38435;
}
#menu > ul > li:nth-child(5):hover:before{
    content: '';
    display: block;
    width: 0; 
    height: 32px; 
    position: absolute;
    border-left: 3px solid #EE0000;
}
#menu > ul > li:nth-child(6):hover:before{
    content: '';
    display: block;
    width: 0; 
    height: 32px; 
    position: absolute;
    border-left: 3px solid #814F7D;
}
#menu > ul > li:nth-child(7):hover:before{
    content: '';
    display: block;
    width: 0; 
    height: 32px; 
    position: absolute;
    border-left: 3px solid #545454;
}
#menu .has-sub{
    z-index:1;
}
#menu .has-sub:hover > ul{
    display: block;
}
#menu .has-sub ul{
    display: none;
    position: absolute;
    width: 150px;
    top: 100%;
    left: 0;
}
#menu .has-sub ul li{
    *margin-bottom: -1px;
}
#menu .has-sub ul li a {
    background: #0074d9;
    border-bottom: 1px dotted #0d8eff;
    filter: none;
    font-size: 14px;
    display: block;
    line-height: 120%;
    padding: 10px;
    color: #ffffff;
    font-weight: normal;
}
#menu .has-sub ul li:hover a {
  background: #0059a6;
}
#menu .has-sub .has-sub:hover > ul {
  display: block;
}
#menu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 150px;;
}
#menu .has-sub .has-sub ul li a {
  background: #0059a6;
  border-bottom: 1px dotted #0d8eff;
}
#menu .has-sub .has-sub ul li a:hover {
  background: #004b8d;
}
 

Espero puedan ayudarme. Gracias!

[pzin]

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

Código CSS:

a {
  color: red;
}
 

Entonces va a sobreescribir el color heredado.

[fegm_4]

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

[fegm_4]

Creo que graficamente se ve mejor. Quiero hacer esto

y por el momento solo he podido hacer la linea de color

[pzin]

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:

#menu > ul > li:nth-child(1) li {
  background-color: green;
}
 
#menu > ul > li:nth-child(1) li li {
  background-color: forestgreen;
}
 

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:

<li class="verde">
 

Código CSS:

li.verde li {
  background-color: green;
}
 
li.verde li li {
  background-color: forestgreen;
}
 

[fegm_4]

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