Hola tengo el menu de arriba , pero me gustaria poder desplejar el submenu lateralmente justo debajo del menu , pero no vertical .....y no consigo hacerlo
este es mi codigo
Código HTML:
<ul class="menu sf-js-enabled" id="menu-nav-header"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-5" id="menu-item-5"><a href="">INICIO</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-18" id="menu-item-18">
<a href="">TEST</a>
<ul class="sub-menu sf-js-enabled" style="float: none; width: 15em; visibility: hidden; display: none;">
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-32" id="menu-item-32" style="white-space: normal; float: left; width: 100%;"><a href="" style="float: none; width: auto;">SUBSCRIPCIÓN</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-31" id="menu-item-31" style="white-space: normal; float: left; width: 100%;"><a href="" style="float: none; width: auto;">PUBLICIDAD</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-30" id="menu-item-30" style="white-space: normal; float: left; width: 100%;"><a href="" style="float: none; width: auto;">EQUIPO</a></li>
</ul>
</li>
</ul>
Y EL CSS , ES
Código:
#mainnav-bar ul {
float: left;
position: relative;
}
#menu-nav-header {
border-bottom: 1px solid;
height: 30px;
}
#mainnav-bar li {
float: left;
line-height: 40px;
margin-left: 2px;
position: relative;
}
#mainnav-bar li a, #mainnav-bar li a:visited {
color: #000000;
display: block;
font-size: 1.1em;
font-weight: bold;
padding: 0 15px;
position: relative;
text-decoration: none;
}
#mainnav-bar ul ul {
left: 0;
line-height: 30px;
margin-top: -10px;
position: absolute;
}
#mainnav-bar ul ul li a, #mainnav-bar ul ul li a:visited {
background-image: none !important;
color: #000000;
font-size: 1.1em !important;
}
#mainnav-bar ul ul li a, #mainnav-bar ul ul li a:visited {
background-image: none !important;
color: #FFFFFF;
font-size: 1.3em !important;
}
#mainnav-bar li a, #mainnav-bar li a:visited {
color: #000000;
display: block;
font-size: 1.1em;
font-weight: bold;
padding: 0 15px;
position: relative;
text-decoration: none;
}
Si alguien puede decirme como hacerlo, no consigo hacerlo , un saludo y muchas gracias a todos