visibility su IE6

[frankiespinolo]

Ciao Ragazzi,
ho questo problema.
Ho un menu orizzontale fatto semplicemente con ul con proprietà hidden per il sottomenu.
In IE6 non funziona, nel senso che non appare il sotto menu nel caso hover.
questo è il css:

.menu{
width:750px;
margin:0px auto;
padding:0px;
height:30px;
margin-top:5px;
position:relative;
z-index:20;
}


.menu ul{
margin: 0px auto;
padding:0px 0px 0px 8px;
margin-top:5px;
}

.menu ul li ul{
margin: 0px auto;
padding:0px 0px 0px 0px;
}


.menu li{
position: relative;
float: left;
list-style: none;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

.menu li a{
height: 30px;
text-decoration:none;
text-align: center;
line-height: 30px;
color: #333;
background: #6d6c4e;
margin: 0px 0px 0px 0px;
padding:0px 5px 0px 5px;
}

.menu li a:hover{
background: #F6DB5A;
white-space:normal;
}

.menu ul ul{
position: absolute;
top: 30px;
visibility: hidden;
}

.menu ul li:hover ul {
visibility:visible;
white-space:normal;
}

.menu ul ul ul li {
visibility: hidden;
left:150px;
top:-30px;
}

.menu ul ul li:hover ul li {
visibility:visible;
white-space:normal;
}

.menu ul li ul li a{
width:163px;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
color: #333;
background: #6d6c4e;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}



questo l'HTML:

<div class="menu">
<ul>[*]Home
[*]pulsante 1<ul>
[*]sotto pulsante 1
[*]sotto pulsante 2
[*]sotto pulsante 3
[*]sotto pulsante 4
[/list]
[*]pulsante 2
[*]pulsante 3
[*]pulsante 4
[*]pulsante 5
[*]pulsante 6
[/list]
</div>


Grazie mille

[fcaldera]

questa regola

.menu li a:hover{
background: #F6DB5A;
white-space:normal;
}

cambiala in

.menu li a:hover{
background: #F6DB5A;
white-space:normal;
direction: ltr;
}

[frankiespinolo]

grazie, ma non cambia niente.

[fcaldera]

attenzione che li:hover non funziona in IE6
in quel browser l'hover può essere gestito solo sui link

[frankiespinolo]

.menu{ 
width:750px; 
margin:0px auto; 
padding:0px; 
height:30px; 
margin-top:5px; 
position:relative; z-index:20; 
}   

.menu ul{ 
margin: 0px auto; 
padding:0px 0px 0px 8px; 
margin-top:5px; 
}  

.menu ul li ul{ 
margin: 0px auto; 
padding:0px 0px 0px 0px; 
}   

.menu li{ 
position: relative; 
float: left; 
list-style: none; 
margin: 0px 0px 0px 0px; 
padding:0px 0px 0px 0px; 
}  

.menu li a{ 
height: 30px; 
text-decoration:none; 
text-align: center; 
line-height: 30px; 
color: #333; 
background: #6d6c4e; 
margin: 0px 0px 0px 0px; 
padding:0px 5px 0px 5px; 
}  

.menu li a:hover{
background: #F6DB5A;
white-space:normal;
direction: ltr;
} 

.menu ul ul{ 
position: absolute; 
top: 30px; 
visibility: hidden; 
}  

.menu ul li:hover ul { 
visibility:visible; 
white-space:normal;
 }  

.menu ul ul ul li { 
visibility: hidden; 
left:150px; top:-30px; 
}  

.menu ul ul li:hover ul li {
 visibility:visible; 
white-space:normal; 
}  

.menu ul li ul li a{ 
width:163px; 
height: 30px; 
display: block; 
text-decoration:none; 
text-align: center; 
line-height: 30px; 
color: #333; 
background: #6d6c4e; 
margin: 0px 0px 0px 0px; 
padding:0px 0px 0px 0px; 
}

[frankiespinolo]

HTML

<div class="menu">
<ul>[*]Home
[*]pulsante 1<ul>
[*]sotto pulsante 1
[*]sotto pulsante 2
[*]sotto pulsante 3
[*]sotto pulsante 4
[/list]
[*]pulsante 2
[*]pulsante 3
[*]pulsante 4
[*]pulsante 5
[*]pulsante 6
[/list]
</div>

[fcaldera]

Originariamente inviato da fcaldera
attenzione che li:hover non funziona in IE6
in quel browser l'hover può essere gestito solo sui link

a meno che tu non voglia rifare il codice in modo da usare solo l'hover sui link,
puoi ovviare aggiungendo un behaviour per IE6 e inferiori

guarda questa pagina
http://www.xs4all.nl/~peterned/csshover.html

[frankiespinolo]

ok grazie mille