Menu verticale

**Gufo** · 16-03-2008, 17:01

Buona domenica a tutti.

Io ho fatto questo menu verticale a tendina:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu a tendina</title>

<style type="text/css" media="screen">
div#hormenu {
width: 100px;
margin: 0; 
padding: 0;
background: #FFFFCC;
}
div#hormenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
div#hormenu li {
width:100px;
margin: 0;
padding: 0;
color:black;
} 
div#hormenu a {
display: block;
padding: 5px;
color: #000;
text-decoration: none;
}
div#hormenu a:hover {
background-color: #000033;
color: #FFFFFF;
text-decoration: none;
}
div#hormenu li ul {
display: none;
}
div#hormenu li:hover ul {
display: block;
position: absolute;
z-index:1;
width:150px;
padding: 0;
margin: 0 0 0 -1px;
background: #CCFFFF;
}
div#hormenu li li {
border: none; width: 150px;
} 
div#hormenu li li a {
padding: 2px 2px 2px 10px;
}

</style>

</head>

<body>

<div id="hormenu"> 
<ul> [*]Menu 1 
<ul> [*]Submenu 1[*]Submenu 1[*]Submenu 1[*]Submenu 1[*]Submenu 1[/list]
 [/list]

<ul> [*]Menu 2 
<ul> [*]Submenu 2[*]Submenu 2[*]Submenu 2[*]Submenu 2[*]Submenu 2[/list]
 [/list]

</div>


</body>
</html>

Ma come si può vedere il sottomenu esce sotto alla sua voce corrispondente e non riesco a visualizzarlo di fianco, la mia domanda quindi è questa: cosa devo aggiungere per visualizzare il sottomenu di fianco alla sua voce corrispondente? Ho provato con float: ma non mi funziona bene.

Grazie Ciao

**fcaldera** · 16-03-2008, 21:54

hai già un thread aperto sull'argomento
http://forum.html.it/forum/showthrea...readid=1223247

continua lì.

Edit: chiudo l'altro e riapro questo

**Hobby** · 17-03-2008, 01:33

Originariamente inviato da fcaldera
hai già un thread aperto sull'argomento
http://forum.html.it/forum/showthrea...readid=1223247

continua lì.

Edit: chiudo l'altro e riapro questo

Scusa ho sbagliato

**UmaThurman** · 17-03-2008, 18:03

Così dovrebbe funzionare

codice:

div#hormenu li {
width:100px;
margin: 0;
padding: 0;
color:black;
position:relative; 
}

div#hormenu li:hover ul {
display: block;
position: absolute;
top:0;
left:100px; 
z-index:1;
width:150px;
padding: 0;
margin: 0 0 0 -1px;
background: #CCFFFF;
}

Fai però attenzione perchè un menu del genere non funziona in internet explorer fino alla versione 6 (la pseudoclasse :hover non è supportata su elementi diversi dai link).

Si può ovviare con il javascript, qui trovi una traduzione di un articolo di A List Apart.

In questo modo però restano sempre fuori gli utenti che usano IE 6 o inferiori con javascript disabilitato e quelli che navigano da tastiera, quindi per essere accessibile al 100% dovresti replicare in qualche modo il contenuto dei sottomenu nelle pagine interne.

**Gufo** · 17-03-2008, 18:29

Originariamente inviato da UmaThurman
Così dovrebbe funzionare

Ti ringrazio! Nel frattempo avevo fatto anche io una modifica molto simili alla tua; ora prova anche la tua e se funziona meglio senzaltro la adotto, in tutti i casi ti sono grato della disponibilità

Fai però attenzione perchè un menu del genere non funziona in internet explorer fino alla versione 6 (la pseudoclasse :hover non è supportata su elementi diversi dai link).

Si può ovviare con il javascript,

In questo modo però restano sempre fuori gli utenti che usano IE 6 o inferiori con javascript disabilitato e quelli che navigano da tastiera, quindi per essere accessibile al 100% dovresti replicare in qualche modo il contenuto dei sottomenu nelle pagine interne.

Certamente che cercherò di replicare i link, ma con i commenti condizionale secondo te a cosa si può ovviare non usando JS.

Grazie

**UmaThurman** · 17-03-2008, 18:38

Penso che l'unica cosa che tu possa fare solo da css con commento condizionale sia di fare un css specifico per ie6 e inferiori in cui le sottovoci sono sempre visibili (reimpostando il menu in modo che i due sottomenu non si sovrappongano)

**Gufo** · 17-03-2008, 19:04

Originariamente inviato da UmaThurman
Penso che l'unica cosa che tu possa fare solo da css con commento condizionale sia di fare un css specifico per ie6 e inferiori in cui le sottovoci sono sempre visibili (reimpostando il menu in modo che i due sottomenu non si sovrappongano)

Forse è l'unica.
Grazie

Discussione: Menu verticale

Strumenti discussione

Ricerca discussione

Visualizza

Menu verticale

Permessi di invio