hole estoy haciendo un menu desplegable que contenga mas menus pero no se como ponerlo horizontal para empezar
Código HTML:
<div id="menud">
<ul>
<li class="level first"> <a href="" class="level">Inicio</a>
<!--[if lte IE 6]><a href="" class="levelie">Inicio<table class="false"><tr><td><![endif]-->
<ul>
<li class="first" ><a href="">Axess</a></li>
<li><a href="">once</a>
<ul>
<li class="first"><a href="">twice</a></li>
</ul>
</li>
</ul>
<!--ìf lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="level"> <a href="" class="level">Inicio</a>
<!--[if lte IE 6]><a href="" class="levelie">Inicio<table class="false"><tr><td><![endif]-->
<ul>
<li class="first" ><a href="">Axess</a></li>
<li><a href="">once</a></li>
</ul>
<!--ìf lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
css
Código HTML:
#menud{
text-align:center;
font-size: 0.8em;
width:155px;
margin:1px auto;
}
#menud ul{
list-style-type: none;
}
#menud ul li.level{
float: left;
width: 155px;
margin-right:2px;
}
#menud ul li a{
display:block;
text-decoration:none;
font-size:17px;
color:#000;
border:solid 0px #fff;
padding:6px;
position:relative;
}
#menud ul li:hover{
position:relative;
}
#menud ul li a:hover,
#menud ul li:hover a.level{
color:#FFF;
background-color:#000;
border-bottom:2px solid #F00;
position:relative;
}
#menud ul li a.level{
display:block!important;
display:none;
position: relative;
}
#menud ul li ul{
display:none;
}
#menud ul li a:hover ul,
#menud ul li:hover ul{
display:block;
position: absolute;
left:0px;
}
#menud ul li ul li a{
width:155px;
padding:5px 0px 5px 0px;
border-top-color:#000;
}
#menud ul li ul li a:hover{
border-top-color:#000;
position:relative;
}
table.false{
border-collapse:collapse;
border:0px;
float:left;
position: relative;
}