Disperazione CSS, qualcuno mi aiuta a ridurre le dimensioni?

d4rkang3l · 14 Ott 2007

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 è:

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

lukeonweb · 15 Ott 2007

Ciao Andrea, a dire il vero vedo solo le macrovoci e nessuna tendina.

Cerca

Cerca

Disperazione CSS, qualcuno mi aiuta a ridurre le dimensioni?

d4rkang3l

Nuovo Utente

lukeonweb

Utente Attivo

Discussioni simili