Hola, tomando como referencia uno de los menús de araudi.net:
CSS:
ul.sidebar{
list-style-type:none;
font: 1.1em Arial, Helvetica, sans-serif;
}
ul.sidebar li a.nivel1, ul.sidebar li a.nivel1ie{
width: 120px;
}
ul.sidebar li a.primera{
border-top: solid 1px #fff;
}
ul.sidebar li a{
display: block;
text-decoration: none;
color: #fff;
background-color: #399;
border:solid 1px #fff;
border-top: none;
padding: 8px;
position: relative;
text-align: center;
}
ul.sidebar li:hover {
position: relative;
color: #fff;
}
ul.sidebar li a:hover, ul.sidebar li:hover a.nivel1 {
background-color: #6CC;
color: #fff;
position: relative;
}
ul.sidebar li a.nivel1 {
display: block!important;
display: none;
position: relative;
}
ul.sidebar li ul {
display: none;
}
ul.sidebar li a:hover ul, ul.sidebar li:hover ul {
display: block;
position:absolute;
top:-1px!important;
top: -22px;
left:145px!important;
left: 152px;
width: 800px;}
ul.sidebar li a:hover ul.primero, ul.sidebar li:hover ul.primero {
top:0px!important;
top: -22px;
}
ul.sidebar li ul li {
display:inline;
}
ul.sidebar li ul li a {
width: 320px;
float: left;
background-color: #6CC;
color: white;
margin-left: -2px;
border-top: solid 1px #fff;
}
ul.sidebar li ul li a:hover {
position: relative;
background-color: #399;
color: #FFF;
}
XHTML:
<ul class="sidebar">
<li class="nivel1"><a href="#" class="nivel1 primera">Blah Blah Blah</a>
<ul class="primero">
<li><a href="#">Bla Blah Blah</a></li>
</ul>
</li>
</ul>
<ul class="sidebar">
<li class="nivel1"><a href="#" class="nivel1 primera">Blah Blah Blah</a>
<ul class="primero">
<li><a href="#">Blah Blah Blah</a></li>
</ul>
</li>
</ul>
Resulta que me han comentado que este menú da problemas en varios navegadores, que no permite pinchar en los vínculos y llevarte a ellos, pero lo más curioso es que no se ve en IE6 según me dicen.
Any help?
Gracias.