• T
    User Attivo •

    Menu con <li> strano

    Ciao a tutti ho fatto un menu con gli <ul> e i <li> e fin qui tutto ok.
    image

    Poi ho pensato di creare un sotto-menu per la voce "SPORT".
    e allora dentro il <li> di Sport, dopo il nome ho aggiunto un <br> e poi un div "submenu" e "submenuFoot" con questo codice css

    [html].submenu{
    background: url(../images/submenuBg.jpg) repeat-y;
    width: 136px;
    float: right;
    margin: 4px 0px 0px 0px;
    padding-top: 6px;
    padding-bottom: 2px;
    }
    .submenuFoot{
    background: url(../images/submenuFoot.jpg) no-repeat;
    width: 136px;
    height: 7px;
    float: right;
    margin: 0px 0px 0px 0px;
    }
    [/html]Però è successo, come potete vedere nell'allegato giù, che il <li> successivo a sport, non scende sotto il submenu.
    image
    Sapere aiutarmi?
    Grazie
    Ciao e Auguri

    0
  • D
    User •

    per la corettezza del codice dentro "li" dovrebbe andare un'altro "ul" con sottomenu... e non "br" e "div"...

    hai mostrato troppo poco il codice per poter capire dove si trovi l'errore del tuo problema...

    PS: "margin: 0px 0px 0px 0px;" equivale a "margin: 0;"... la stessa cosa pero un po più corta 😛

    0
  • T
    User Attivo •

    Quindi dovrebbe venire così:
    [HTML]
    <div class="menu_left">
    <ul>
    <li>Nome1</li>
    <li>Nome2</li>
    <li>VoceMadre
    <ul>
    <li>Sottovoce1</li>
    <li>Sottovoce2</li>
    </ul>
    </li>
    </ul>
    </div>
    [/HTML]

    Giusto?

    0
  • D
    User •

    Si... cosi e' giusto... io pero' eliminerei anche quel "div", che e' inutile...

    [HTML]<ul class="menu_left">
    <li>Nome1</li>
    <li>Nome2</li>
    <li>VoceMadre
    <ul>
    <li>Sottovoce1</li>
    <li>Sottovoce2</li>
    </ul>
    </li>
    </ul>[/HTML]
    a questo punto basta solo aggiungere adeguato css...

    0
  • T
    User Attivo •

    E quindi poi al <ul> del sotto menu devo mettere class='submenu' o no?

    0
  • D
    User •

    non necesariamente... puoi riferirci a sottomenu usando "#menu_left li ul { }"...

    0
  • T
    User Attivo •

    Mi puoi aiutare a fare il CSS? Non sono molto ferrato. Questo è quello che utilizzavo fino ad ora:

    [HTML].menu_left{ width: 152px; margin: 0px; padding-bottom: 20px;}
    .menu_left li{width: 152px; height: 28px; background: #006e9c url("../images/menu_space.jpg") no-repeat; padding: 4px 0px 4px 0px;}
    .menu_left ul{list-style: none;}
    .menu_left a{text-decoration: none; color: #f3f3f3; font-size: 12px; padding: 0px 0px 0px 15px; font-family: Verdana;}
    .menu_left li:hover{width: 152px; height: 28px; background: url("../images/menu_space_hover.jpg") no-repeat; padding: 4px 0px 4px 0px;}
    [/HTML]

    0
  • T
    User Attivo •

    Allora ho cambiato un po le cose...
    Ho messo all'interno del <li> che contiente il sotto menu un div perchè poi il sotto menu deve essere visibile o meno...
    Posto il codice e mi dite se sbaglio qualcosa:
    CSS:
    [HTML]/* MENU */
    .menu{width: 148px; height: 40px; margin: 0px 0px 0px 4px; background: #ffffff url("../images/menu.jpg") no-repeat;}
    .menu_left{ width: 152px; margin: 0px; padding-bottom: 20px;}
    li.menu_left{width: 152px; background: #006e9c url("../images/menu_space.jpg") no-repeat; padding: 4px 0px 10px 0px;}
    ul.menu_left{list-style: none;}
    a.menu_left{text-decoration: none; color: #f3f3f3; font-size: 12px; margin-bottom: 3px; padding: 0px 0px 0px 15px; font-family: Verdana;}
    li.menu_left:hover{width: 152px; background: url("../images/menu_space_hover.jpg") no-repeat; padding: 4px 0px 10px 0px;}

    /* SUBMENU */
    div.submenu{ border: 0px none; margin: 2px 0px 0px 16px; padding: 3px 0px 0px 0px; width: 136px; background: url("../images/submenuBg.jpg") repeat-y;}
    a.submenu{text-decoration: none; text-align: right; color: #FF5500; padding: 3px; margin: 0px; font-size: 12px; font-family: Verdana;}[/HTML]

    HTML:
    [HTML]
    <ul class="menu_left">
    <li class="menu_left">
    <a href="index.php" class="menu_left">HOME</a>
    </li>
    <li class="menu_left">
    <a href="#" onclick="apri('discipline');" class="menu_left">Sport</a>
    <div class="submenu" id="discipline">
    <a href="#" class="submenu">Nuoto</a><br />
    <a href="#" class="submenu">Pallanuoto</a>
    <img style="border: 0px none ; margin: 0px;" alt="" src="images/submenuFoot.jpg"/>
    </div>
    </li>[/HTML]
    Come vi sembra?
    Ho qualche problema di visualizzazione....
    Ciao e spero in un vostro aiuto....

    0
  • K
    Super User •

    Ciao Talkoman 🙂

    Innanzitutto non puoi inserire un div all'interno di un elemento di lista come nel tuo caso.
    Puoi semmai utilizzare il tag "span" che è un elemento inline solitamnete usato per attribuire uno stile diverso a parole e/o elementi testuali.

    0
Effettua l'accesso per rispondere