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!