• User

    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>


  • ModSenior

    Eventualmente non è possibile integrarlo con uno di quelli in rete?
    Cosi come è credo bisognerebbe avere, l'html, il css, e l'eventuale javascript.


  • User Attivo

    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


  • User

    Grazie per le risposte e per i consigli.Ora è perfettamente funzionante 😄