Ciao a tutti, grazie per le risposte precedenti.
Sto tentando di trasformare i semplici menu orizzontali del mio sito con dei menu a tendina.
(web application realizzata con visual studio 5 - vb.net -files .aspx)
In fondo vi allego il codice.
1) secondo voi va bene?
Leggo però che ci sarebbe una mancata compatibilità con Internet Explorer, che non supporterebbe la proprietà hover per elementi che non siano i link. Quindi, se capisco bene, applicando come faccio io la proprietà :hover agli elementi LI o UL il menu darebbe problemi (li:hover )!?
2) vero o no che non funziona con Ie?
3) se vero, con quali versioni non funziona? Ie6 -, Ie, Ie+ ???
4) come ovviare?
5) e con gli altri browser?
6) quali problemi: non funziona proprio il menu, non scende la tendina, o solo ad es. non cambia colore?
Inoltre:
così com'è a me pare che funzioni (1 livello di tendina) ma non riesco a realizzare un secondo livello.
7) Qualche suggerimento?
Scusate ma sono agli inizi...
Grazie per l'aiuto!
Tappat
file index.aspx
... ...
<div id="menu">
<ul>
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">sub 1a</a></li>
<li><a href="#">sub 1b</a>
<ul>
<li><a href="#">sub sub 1b-1</a></li>
<li><a href="#">sub sub 1b-2</a></li>
<li><a href="#">sub sub 1b-3</a></li>
</ul>
</li>
<li><a href="#">sub 1c</a></li>
</ul>
</li>
... ...
menu.css
... ...
.menu{
float: left;
}
.menu ul{
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
display:block;
font-weight:normal;
line-height:30px;
margin:0px;
padding:0px 15px;
text-align:center;
text-decoration:none;
color: #FFFFFF;
}
.menu li.current a{
display: block;
font-weight: normal;
line-height: 30px;
margin: 0px;
padding: 0px 15px;
text-align: center;
text-decoration: none;
color: #FFFFFF;
background-position: center bottom;
background-image: url(../images/current.png);
background-repeat: repeat-x;
}
.menu li a:hover, .menu ul li:hover a{
background: url(../img/hov.jpg) #ddd no-repeat bottom center;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#2F3130;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
}
.menu li:hover ul{
display:block;
}
.menu li li{
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 225px;
background-image: url(../img/separ.gif);
background-repeat: no-repeat;
background-position: left bottom;
border-bottom: #FFFFFF 2px ridge;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:30px;
font-size:10px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background: url(../img/hov_sub.png) #bbb no-repeat left center;
border: 0px;
color: #ffffff;
font-size: 10px;
text-decoration: none;
}
