Visualizzazione dei risultati da 1 a 2 su 2
  1. #1

    Aiuto Css menu non funziona!!!

    Salve, ho un problema con un menu..quando si passa con il mouse sopra una voce, appaiono tutte le sottovoce del menu, non solo quella desiderata!!

    vi posto lo script css e html:


    ul.sdt_menu{
    margin:0;
    padding:0;
    list-style: none;
    font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
    font-size:16px;
    width:1200px;
    }
    ul.sdt_menu a{
    text-decoration:none;
    outline:none;
    }
    ul.sdt_menu li{
    float:left;
    width:195px;
    height:85px;
    position:relative;
    cursorointer;

    }
    ul.sdt_menu li > a{
    position:absolute;
    top:-95px;
    left:50px;

    width:195px;
    height:100px;


    }
    ul.sdt_menu li a img{
    border:none;
    position:absolute;
    width:0px;
    height:0px;
    bottom:0px;
    left:85px;
    z-index:100;
    -moz-box-shadow:0px 0px 4px #000;
    -webkit-box-shadow:0px 0px 4px #000;
    box-shadow:0px 0px 4px #000;
    }
    ul.sdt_menu li span.sdt_wrap{
    margin: auto;
    text-align: center;
    position:absolute;
    top:25px;
    left:0px;
    width:199px;
    height:60px;
    z-index:15;
    }
    ul.sdt_menu li span.sdt_active{
    position:absolute;
    background:#111;
    top:85px;
    width:199px;
    height:0px;
    left:0px;
    z-index:14;
    -moz-box-shadow:0px 0px 4px #000 inset;
    -webkit-box-shadow:0px 0px 4px #000 inset;
    box-shadow:0px 0px 4px #000 inset;
    }

    /*menu destra e sinistra*/
    ul.sdt_menu li span span.sdt_link,
    ul.sdt_menu li span span.sdt_descr,
    ul.sdt_menu li div.sdt_box a{
    margin: auto;
    text-align: center;
    text-transform:uppercase;
    text-shadow:1px 1px 1px #000;
    }
    ul.sdt_menu li span span.sdt_link{
    color:#fff;
    font-size:28px;
    text-align: center;

    }

    ul.sdt_menu li div.sdt_box{
    margin-left: 50px;
    padding-left: 20px;
    display:block;
    position:absolute;
    width:179px;
    top:110px;

    display:none;
    background:#000;

    }
    ul.sdt_menu li div.sdt_box a{
    float:left;
    clear:both;
    line-height:30px;
    color:#0B75AF;
    }


    ul.sdt_menu li div.sdt_box a:first-child{
    margin-top:10px;
    }

    ul.sdt_menu li div.sdt_box a:hover{
    color: yellow;
    }

    ul.sdt_menu li div.sdt_box div.sdt_box1 a{
    display: none;
    margin-left: 50px;
    margin-right: 50px;
    float:left;
    clear:both;
    line-height:30px;
    color:red;
    margin-top: 0px;
    }

    ul.sdt_menu li div.sdt_box:hover div.sdt_box1 a{
    display: block;
    margin-left: 50px;
    margin-right: 50px;
    float:left;
    clear:both;
    line-height:30px;
    color:red;
    margin-top: 0px;
    }

    Qui sotto, se non sbaglio, dovrebbe farmi apparire il contenuto del div "div.sdt_box1" quando sono sul contenuto del div "div.sdt_box" giusto?..questi div all'interno del menu mi hano totalmente mandato in confusione..

    ul.sdt_menu li div.sdt_box:hover div.sdt_box1 a{
    display: block;
    margin-left: 50px;
    margin-right: 50px;
    float:left;
    clear:both;
    line-height:30px;
    color:red;
    margin-top: 0px;

    }


    Codice HTML:


    <div class="content">

    <ul id="sdt_menu" class="sdt_menu">[*]
    <a href="index.php">
    [img]images/menu/home_menu.jpg[/img]
    <span class="sdt_active"></span>
    <span class="sdt_wrap">
    <span class="sdt_link">Home</span>

    </span>
    </a>

    [*]
    <a href="#">
    [img]images/menu/flower_menu.jpg[/img]
    <span class="sdt_active"></span>
    <span class="sdt_wrap">
    <span class="sdt_link">Discipline</span>

    </span>
    </a>
    [*]
    <a href="#">
    [img]images/menu/yin_yang_menu.jpg[/img]
    <span class="sdt_active"></span>
    <span class="sdt_wrap">
    <span class="sdt_link">Associazione</span>

    </span>
    </a>
    <div class="sdt_box">

    Websites

    <div class="sdt_box1">
    ciccio
    Illustrations
    Photography
    </div>

    Illustrations

    <div class="sdt_box1">
    pippo
    Illustrations
    Photography
    </div>

    Photography
    </div>
    [*]
    <a href="#">
    [img]images/menu/news_menu.jpg[/img]
    <span class="sdt_active"></span>
    <span class="sdt_wrap">
    <span class="sdt_link">Corsi e Seminari</span>

    </span>
    </a>
    [/list]
    </div>


    Vi prego aiutatemi perchè è due giorni che ci lotto e non ne vengo a capo…se poi non ci capite bene vi posso postare in maniera piu schematica il tutto..
    Realizzazione siti internet e posizionamento nei motori di ricerca.

    web-siena.it

  2. #2
    Moderatrice di CSS L'avatar di ResianTaxidrive
    Registrato dal
    Oct 2007
    residenza
    Udine
    Messaggi
    2,766
    Innanzittuto quando posti il codice mettilo tra i tag [ CODE ] [/ CODE ] (trovi il pulsante per aggiungere questi tag vicino alle combobox dove scegli i font, il colore, la dimensione) così da migliorare la leggibilità.
    Inoltre come codice mi sembra molto incasinato; tu parli di "sottovoci", immagino che intendi menu di secondo livello, ma io vedo solo un livello.

    Per menu di secondo livello intendo una cosa tipo

    codice:
    <ul>[*] Link 1 [*] Link 2 [*] 
         <ul>[*] Link 2.1 [*] Link 2.2 [/list]
       [/list]
    Nel tuo codice vedo solo un ul, questo mi fa capire che c'è solo un livello di menu.
    Probabilmente hai tentato di fare dei menu di secondo livello con quei div.sdt_box ma non è il sistema corretto.
    Ti consiglio di riscrivere il tutto semplificando alquanto e così anche il css risultante sarà più snello. Attualmente è un po' troppo incasinato ed è meglio ripartire ini modo più ordinato che mettere pezze in un codice ingarbugliato.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.