Ciao a tutti!!!!
Inserisco di seguito codice pagina html e foglio di stile
prova.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Prova</title>
<link href="menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu">
<ul style="float: right" id="menuList">
<li class="folder"><a class="submenu">Voce1</a>
<ul>
[*]Sottovoce11
[*]Sottovoce12
[/list]
<li class="folder"><a class="submenu">Voce2</a>
<ul>
[*]Sottovoce21
[*]Sottovoce22
[*]Sottovoce23
[*]Sottovoce24
[/list]
<li class="folder"><a class="submenu">Voce3</a>
<ul>
[*]Sottovoce31
[*]Sottovoce32
[*]Sottovoce33
[/list]
<li class="folder"><a class="submenu">Voce4</a>
<ul>
[*]Sottovoce41
[*]Sottovoce42
[/list]
[*]
Voce5
[*]
Voce6
[*]
Voce7
[*]
Voce8
<li class="folder"><a class="submenu">Voce9</a>
<ul>
[*]Sottovoce91
[*]Sottovoce92
[*]Sottovoce93
[*]Sottovoce94
[/list]
[/list]
</div>
</body>
</html>
menu.css
#menu img {
border: none;
}
body {
margin: 0;
}
#menu {
font-family: arial;
width:100%;
height:50px;
position:relative;
margin-top: 2px;
font-size:11px;
background:#f5f5f5;
z-index:100;
}
#menu ul {
padding:0;
margin:0;
list-style-type: none;
}
#menu ul li {
float:left;
width:auto;
}
#menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
padding: 0px 6px 0px 6px;
height:25px;
line-height:25px;
}
#menu ul li ul {
visibility:hidden;
position:absolute;
top:25px;
}
#menu ul li:hover ul, #menu ul li a:hover ul {
visibility:visible;
width:auto;
}
#menu ul li:hover ul li ul, #menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
top:25px;
}
#menu ul li:hover ul li a, #menu ul li a:hover ul li a {
display: block;
color: #000;
margin-right: 5px;
}
#menu ul li:hover ul li:hover ul, #menu ul li a:hover ul li a:hover ul {
visibility:visible;
}
#menu ul li:hover ul.right li {
float:right;
}
Per le prime voci che hanno sottovoci non ci sono problemi. Sia con Firefox3, che con ie7 che con Opera 9.5, le sottovoci vengono allineate perfettamente orizzontalmente sotto le voci, partendo proprio dalla voce di competenza
Il problema è ultima voce con sottovoci. Con firefox 3, le sottovoci non sono più orizzontali ma verticali e lungo il margine destro del monitor. Con Ie7 e Opera invece, le sottovoci sono ancora orizzontali, ma partono sempre da rispettiva voce e si allungano oltre la barra e allargano inutilmente la pagina.
Io invece gradirei un effetto del genere per ultima voce con sottovoci
voce 1 voce 2 voce 3 voce 4 voce 5 voce 6 voce9
sottovoce 91 sottovoce 92 sottovoce 93 sottovoce 94
Spero di essere stato chiaro...
Attendo vostri aiuti
GRAZIE
CIAO