• W
    User •

    creato menu a tendina non si vede quando scende

    buongiorno ho creato un menu a tendina il problema quando vado sul menu a tendina (quando scende) non si vede perché viene coperto dal contenuto della pagina ( coperto dal div section).il menu' a tendina e' sulla voce prestazioni.
    vi facci vedere il codice:
    codice html
    <!DOCTYPE html>
    < html>
    < head>
    < meta http-equiv="Content-Language" content="it">
    < meta charset="utf-8">
    < title> benvenuti</title>
    < script src="http/:html5 shiv.googlecode.com/svn/trunk/html5" js></script>
    < style>
    #header{
    background-image:url(intestazione.jpg);
    color:black;
    text-align:center;
    padding:5px;
    }
    #section{
    width:1087px;
    float:left;
    padding:10px;
    border-style:solid;
    border-width:1px;
    background:url(nuvole.jpg);
    }
    body { background: url(sfondobody.jpg); }

    < /style>
    < link rel="stylesheet" type="text/css" href="stile.css">
    < /head>
    < body>
    < div id="header" style="height: 54px">
    < img src="posturologia.jpg" height="125" align="left" width="145"><h1 style="height: 126px"> prova</h1>
    < /div>

    < div <ul class="menu">
    <li class="primo"><a href="home.htm"/a> HOME </li>
    <li class="secondo"><a heref="chisono.htm"/a> CHI SONO </li>
    <li>PRESTAZIONI
    <ul class="sub-menu">
    <li>111</li>
    <li>22222</li>
    <li class="ultimo-sub">444444</li>
    </ul>
    </li>
    <li>CONTATTI <a href="contatti.htm"/a></li>
    </div>

    <div id="section">
<p>Testo</p>
</div>

    < /body>
    < /html>

    codice css:
    .menu li{
    display: block;
    float: left;
    width: 276.2px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #2C3E50;
    border-right: 1px solid;
    background: -webkit-linear-gradient(top, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
    background: -moz-linear-gradient(top, 50%, 51%, 100%);
    background: -o-linear-gradient(top, 50%, 51%, 100%);
    background: -ms-linear-gradient(top, 50%, 51%, 100%);

    }
    .menu li:hover{
    cursor: pointer;
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%, #e5e5e5 100%);
    background: -moz-radial-gradient(center, ellipse cover, 0%, 100%);
    background: -o-radial-gradient(center, ellipse cover, 0%, 100%);
    background: -ms-radial-gradient(center, ellipse cover, 0%, 100%);
    color: slateGrey;
    }
    .primo{
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    }
    .secondo{
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    }
    .terzo{
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    }

    .sub-menu{
    visibility: hidden;
    }
    .menu li:hover .sub-menu{
    visibility: visible;
    }
    .sub-menu li{
    border-top: 1px dotted;
    }
    .sub-menu li:hover{
    width: 145px;
    background: -webkit-radial-gradient(center, ellipse cover, #f7fbfc 10%, #add9e4 100%);
    background: -moz-radial-gradient(center, ellipse cover, 10%, 100%);
    background: -o-radial-gradient(center, ellipse cover, 10%, 100%);
    background: -ms-radial-gradient(center, ellipse cover, 10%, 100%);
    transition: all 0.1s ease 0s;
    -webkit-transition: all 0.1s ease 0s;
    -moz-transition: all 0.1s ease 0s;
    -o-transition: all 0.1s ease 0s;
    -ms-transition: all 0.1s ease 0s;
    }
    .ultimo-sub{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    }

    #menu li {display:inline;}

    0
  • W
    User •

    nessuno mi risponde?

    0
  • W
    User •

    c e' qualcuno che mi risponde

    0
  • S
    User •

    Ciao, potresti caricare il file da qualche parte e farci vedere il sito live? Sarebbe molto d'aiuto.

    0
  • W
    User •

    ok un attimo
    non mi fa inserire il sito

    0
  • W
    User •

    proviamosempre.altervista.org

    0
  • S
    User •

    Racchiudi il menù in un DIV che abbia uno z-index più elevato del resto. Inoltre cambia il tuo menù che così non va bene. Non esiste nessun tag di tipo div ul, o è un **div **o è un ul.

    Diventa quindi così:

    [HTML]<div style="position: relative; z-index: 3000">
    <ul class="menu">
    <li class="primo"><a href="index.htm" a=""> HOME </a></li><a href="index.htm" a="">
    </a><li class="secondo"><a href="index.htm" a=""></a><a href="contenuto/chisono.htm" a=""> CHI SONO </a></li><a href="contenuto/chisono.htm" a="">
    <li>PRESTAZIONI
    <ul class="sub-menu">
    <li>111</li>
    <li>22222</li>
    <li class="ultimo-sub">444444</li>
    </ul>
    </li>
    </a><li><a href="contenuto/chisono.htm" a=""></a><a href="contenuto/contatti.htm">CONTATTI</a></li>
    </ul>
    </div>[/HTML]

    0
  • W
    User •

    Gentilissimo grazie per la risposta. Non ho capito bene il problema di div e ul.

    0
  • W
    User •

    grazie adesso funziona solo che il menu a tendina non rimane aperto. cioe' quando vado sopra non riesco a selezionare il campo che voglio perché scompare subito.

    0
  • W
    User •

    @wtecnologia said:

    grazie adesso funziona solo che il menu a tendina non rimane aperto. cioe' quando vado sopra non riesco a selezionare il campo che voglio perché scompare subito.

    nessuno risponde?

    0
Effettua l'accesso per rispondere