PROBLEMA:
Cuando estoy sobre (hover) "Section 1" me aparece el background de la imagen, pero al ponerme sobre "Section 1.1" desaparece el background de "Section 1" y me gustaría que se mantuviera visible tanto si estoy sobre la raíz o las subopciones.
Aquí os dejo los archivos... a ver si alguien puede echarme un cable que llevo dos días detrás de esto y no consigo averiguarlo.
Archivo CSS:
Código:
#menu{
float:left;
padding: 0 25px 0 0;
}
#menu a:hover {
background: #ccc;
}
#menu ul {
margin: 0;
padding: 0;
list-style-type: none;
font: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#menu ul li {
width:158px;
float:left;
text-transform:uppercase;
margin:2px;
}
#menu ul li a {
text-decoration: none;
color: #000000;
display: block;
padding: 23px 1px 40px 1px;
font-size:12px;
font-weight:bold;
}
#menu ul li a:hover{
background: url(img/bg-menu.gif) no-repeat top center;
color: #FFF;
}
#menu ul li ul{
display:none;
float:left;
background:#f5f5f5 url(img/bg-menu.gif) no-repeat top center;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#menu ul li:hover ul{
background:#f5f5f5;
display:block;
float:left;
width:130px;
margin: 0 0 0 14px;
padding:10px 0;
position:absolute;
z-index:150
}
#menu ul li ul li{
width:130px;
float:left;
text-transform:uppercase;
margin:0px 0 0 0;
border-top:1px solid #eee;
border-bottom:1px solid #eee;
}
#menu ul li ul li a{
background:#f5f5f5;
font-size:10px;
font-weight:normal;
border-width: 0 0 0 0;
padding: 5px 1px 5px 1px;
}
#menu ul li ul li a:hover{
background:#c01a00;
}
Código:
<div id="menu">
<ul>
<li><a href="#">Section 1</a>
<ul>
<li><a href="#">Section 1.1</a></li>
</ul></li>
<li><a href="#">Section 2</a></li>
<li><a href="#">Section 3</a></li>
<li><a href="#">Section 4</a></li>
<li><a href="#">Section 5</a></li>
<li><a href="#">Section 6</a></li>
</ul>
</div>