- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Aiuto per un menù CSS
-
Aiuto per un menù CSS
Salve a tutti!Avrei un piccolo problema con il menù CSS di un sito che sto creando.
Questo menù non prevedeva,quando l'ho creato,il drop-down,ma adesso ho bisogno di implementarlo.Ho provato varie soluzioni,ma non riesco a modificare il mio menù.
Vi posto l'html del menù,magari qualcuno mi può dare qualche consiglio.Grazie^^
<ul class="menu">
<li><a href="/home" class="active"><span>Home</span></a></li>
<li><a href="/vendita"><span>Vendita</span></a></li>
<li><a href="/affitti"><span>Affitti</span></a></li>
<li><a href="/contatti"><span>Contatti</span></a></li>
<li><a href="/areariservata"><span>AreaRiservata</span></a></li>
</ul>
-
Eventualmente non è possibile integrarlo con uno di quelli in rete?
Cosi come è credo bisognerebbe avere, l'html, il css, e l'eventuale javascript.
-
Prova così, questo è il CSS
//POSIZIONAMENTO MENU// #menu{ padding:0; margin:0; } ul{ padding:0; margin:0; } li{ position: relative; float: left; list-style: none; margin: 0; padding:0; } //STILE DEL LINKS// li a{ width:100px; height: 30px; display: block; text-decoration:none; text-align: center; line-height: 30px; background-color: black; color: white; } li a:hover{ background-color: red; } //EFFETTO DROPDOWN// ul ul{ position: absolute; top: 30px; visibility: hidden; } ul li:hover ul{ visibility:visible; }
L'HTML:
[HTML]<div id="menu">
<ul>
<li><a href="home">Home</a>
<ul>
<li><a href="#">Link 1-1</a></li>
<li><a href="#">Link 1-2</a></li>
<li><a href="#">Link 1-3</a></li>
</ul>
</li>
<li><a href="vendita">Vendita</a>
<ul>
<li><a href="#">Link 2-1</a></li>
<li><a href="#">Link 2-2</a></li>
<li><a href="#">Link 2-3</a></li>
</ul>
</li>
<li><a href="affitti">Affitti</a>
<ul>
<li><a href="#">Link 3-1</a></li>
<li><a href="#">Link 3-2</a></li>
<li><a href="#">Link 3-3</a></li>
</ul>
</li>
<li><a href="contatti">Contatti</a>
<ul>
<li><a href="#">Link 4-1</a></li>
<li><a href="#">Link 4-2</a></li>
<li><a href="#">Link 4-3</a></li>
</ul>
<li><a href="areariservata">Area Riservata</a>
<ul>
<li><a href="#">Link 5-1</a></li>
<li><a href="#">Link 5-2</a></li>
<li><a href="#">Link 5-3</a></li>
</ul>
</li>
</li>
</ul>
</div>[/HTML]Questo codice funziona in tutti i browser a parte Internet Explorer 6...
Se la cosa ti da fastidio puoi scaricare il file xs4all.nl/~peterned/htc/csshover2.htc (copia e incolla l'indirizzo nella barra del browser) e caricarlo online insieme al resto dei tuoi file e inserire nel CSS il seguente stile:body{ behavior: url(csshover2.htc); }
e, sempre nel CSS modifica la sezione
in
-
Grazie per le risposte e per i consigli.Ora è perfettamente funzionante