Ciao,
ho svilupato un menu a tendina per il mio sito che potete vedere quì: http://www.siatec.net/andrea/archivio/menu/menu.html
La lunghezza complessiva del menù (ovvero la larghezza della barra che comprende tutti i tasti deve rimanere immutata).
Quando l'utente passa il mouse sopra i tasti questi si abbassano aprendo un sotto menu a tendina per ogni tasto.
Il problema è che le tendine azzurre sono troppo larghe e dovrebbero essere più strette ma non riesco a capire come ridimensionarle a 120 px.
Il codice html è:
mentre il codice CSS è:
Non riesco proprio ad uscirne fuori, mi date una manina?
Grazie
andrea
ho svilupato un menu a tendina per il mio sito che potete vedere quì: http://www.siatec.net/andrea/archivio/menu/menu.html
La lunghezza complessiva del menù (ovvero la larghezza della barra che comprende tutti i tasti deve rimanere immutata).
Quando l'utente passa il mouse sopra i tasti questi si abbassano aprendo un sotto menu a tendina per ogni tasto.
Il problema è che le tendine azzurre sono troppo larghe e dovrebbero essere più strette ma non riesco a capire come ridimensionarle a 120 px.
Il codice html è:
Codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>menu multilivello</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<link href="layout.css" rel="stylesheet" type="text/css" title="default" />
</head>
<body>
<ul id="menu">
<li>
<dl class="gallery">
<dt class="one" id="mouse"><a href="index.html">Home</a></dt>
</dl>
</li>
<li>
<dl class="gallery">
<dt class="two" id="mouse"><a href="index.html">Chi Siamo</a></dt>
<dd><a href="staff.html" title="Presentazione staff">Staff</a></dd>
<dd><a href="dove.html" title="Come raggiungerci">Dove Siamo</a></dd>
<dd class="last"><a href="diving.html" title="Presentazione Divng Center">Il Nostro Diving</a></dd>
</dl>
</li>
<li>
<dl class="gallery">
<dt class="three" id="mouse"><a href="../corsi/elencocorci.html">Corsi Sub</a></dt>
<dd><a href="../corsi/openwaterdiver.html" title="Open Water Diver">Open Water Diver</a></dd>
<dd><a href="../corsi/advancedowd.html" title="Advanced OWD">Advanced OWD</a></dd>
<dd><a href="../corsi/efr.html" title="EFR">EFR</a></dd>
<dd><a href="../corsi/rescuediver.html" title="Rescue Diver">Rescue Diver</a></dd>
<dd><a href="../corsi/specialita.html" title="Specialità">Specialità</a></dd>
<dd><a href="../corsi/masterscubadiver.html" title="Master Scuba Diver">Master Scuba Diver</a></dd>
<dd><a href="../corsi/divemaster.html" title="Dive Master">Dive Master</a></dd>
<dd><a href="../corsi/hsa.html" title="HSA Open Water Diver">HSA Open Water Diver</a></dd>
<dd><a href="../corsi/riabilitazione.html" title="Riabilitazione in acqua">Riabilitazione in acqua </a></dd>
<dd><a href="../corsi/nuoto.html" title="Nuoto Diversamente Abili">Nuoto Diversamente Abili</a></dd>
<dd class="last"><a href="../layouts/fin.html" title="Assistente Bagnanti FIN"> Assistente Bagnanti FIN</a></dd>
</dl>
</li>
<li>
<dl class="gallery">
<dt class="four" id="mouse"><a href="../galleria/photogallery.html">Photo Gallery</a></dt>
<dd><a href="../galleria/puntiimmersione.html" title="Punti di immersione">Punti d'Immersione</a> </dd>
<dd><a href="../galleria/viaggi.html" title="Foto dai nostri viaggi">Viaggi</a></dd>
<dd><a href="../galleria/video.html" title="I nostri video subacquei">Video</a></dd>
<dd><a href="../galleria/eventi.html" title="Foto da eventi nel mondo della subacquea">Eventi</a> </dd>
<dd class="last"><a href="../galleria/corsi.html" title="Foto scattate durante i nostri corsi sub"> Corsi</a></dd>
</dl>
</li>
<li>
<dl class="gallery">
<dt class="five" id="mouse"><a href="links.html">Links</a></dt>
<dd><a href="http://www.hsaitalia.it/" title="HSA Italia">HSA Italia</a></dd>
<dd><a href="http://www.mclink.it/assoc/assonet/" title="A.S.S.O">Viaggi</a></dd>
<dd><a href="http://www.laziohandicap.org/" title="LazioHandicap.org">LazioHandicap.org</a></dd>
<dd><a href="http://www.studiobluproduction.org/" title="studiobluproduction.org">Blu Production</a> </dd>
<dd><a href="http://www.laplaca.it/" title="LaPlaca.it">LaPlaca.it</a></dd>
<dd class="last"><a href="http://www.juventusnuoto.net/" title="Juventus Nuoto">Juventus Nuoto</a> </dd>
</dl>
</li>
</ul>
</body>
</html>mentre il codice CSS è:
Codice:
body{
font-family: arial, helvetica, verdana, tahoma, sans-serif;
font-size: 80%;
color: #000;
}
ul#menu{
list-style-type:none;
padding:0;
float: left;
width: 760px;
height: 40px;
line-height: 40px;
background: #D4D4D4 url("img/bcbk.png");
}
ul#menu li{
float: left;
height: 40px;
margin: 0 0.2em 0;
padding: 0;
background: url("img/bcbk1.png") no-repeat top right;
color: #777;
text-decoration: none;
}
ul#menu li:hover{
background-position: bottom right;
color: #0876AC;
}
ul#menu li a{
text-decoration: none;
}
ul#menu li a:visited{
text-decoration: none;
}
ul#menu li dd{
display: none;
}
ul#menu li:hover, ul#menu li a:hover{
border: 0;
}
ul#menu li:hover dd, ul#menu li a:hover dd{
display: block;
}
ul#menu li:hover dl, ul#menu li a:hover dl{
padding-bottom: 20px;
}
ul#menu table{
border-collapse:collapse;
padding:0;
margin:-1px;
font-size:1em;
}
ul#menu dl{
width: 120px;
margin: 0;
padding: 0;
text-align:center;
cursor:pointer;
}
ul#menu dt{
margin:0;
padding: 0;
font-size: 1.1em;
color: #fff;
}
ul#menu dd{
margin: 0;
padding: 0;
color: #FFFFFF
font-size: 1em;
background: #47a;
text-align: left;
filter:alpha(opacity=5);
-moz-opacity:.5;
opacity:.5;
}
ul#menu dd.last{
border-bottom: 1px solid #444;
}
.gallery dt a, .gallery dt a:visited{
display:block;
color:#444;
}
.gallery dd a, .gallery dd a:visited{
color:#fff;
text-decoration:none;
display:block;
padding:4px 5px 4px 20px;
background: #47a url(arrow.gif) no-repeat 10px 10px; width:125px;
}
.gallery dd a:hover{
background: #258 url(arrowr.gif) no-repeat 11px 10px;
color:#9cf;
}Non riesco proprio ad uscirne fuori, mi date una manina?
Grazie
andrea
