Al momento tengo lo siguiente en mi archivo php
Código HTML:
Ver original
y mi archivo CSS es el siguiente
Código CSS:
Ver original
#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!