• User Attivo

    problema dropdown menu

    Buongiorno a tutti,
    vi scrivo perchè ho un problema con <ul> e <li> annidati: nello specifico non riesco a formattare in maniera diversa gli <ul> figli.

    Di seguito il codice che genera il menù:

    
    #css_dropdown_verticale{
        margin-top: 30px;
        }   , ul, li{
        padding:0;
        margin-left: 6px;
        }
        li{
        list-style: none;
        position: relative;
        width:233px;
        cursor:pointer;
    
        }
        li a:link,visited,active{
        text-decoration:none;
        font-family: "Century Gothic", "Century Gothic Bold";
        font-size: 30px;
        font-weight:normal;
        color: #FFF;
        line-height: 90%;
        text-align:left;
        }
        
    
        li a:hover{
        width:233px;
        color: #ac0233;
        text-decoration: none;
        padding-left: 10px;
        }
    
        ul ul{
        position: absolute;
        top:0;
        left:227px;
        padding-left: 10px;
        line-height: 150%;
        font-size: 20px;
        width: 100%;
        visibility:hidden;
        }
        
        ul li:hover ul{
        visibility:visible;
        width: 100%;
        }
    
    
    ```potete vedere una preview qui: w w w. s o t t o v e n t o b o r m i o . it / layout4.html
    
    ciò che vorrei fare è dare una formattazione diversa ai link del menù "figlio" ovvero rispetto al "padre" rendere il testo più piccolo adeguandone di conseguenza le dimensioni del box che lo contiene.
    
    Ho provato a modificare il tag 
    

    Credo sia una questione di ereditarietà ma non ne vengo fuori.
    
    Vi ringrazio per la cortese attenzione e spero che qualcuno riesca ad aiutarmi.

  • Super User

    Ciao bormiositi,
    prova in questo modo:

    
    #css_dropdown_verticale ul ul a, ul ul a:hover{
    font-size:20px!important;
    }
    
    ```il valore !important non dovrebbe essere fondamentale.
    
    Ciao!

  • User

    Ciao, prova seguendo questo schema:

    
    #css_dropdown_verticale ul {proprietà} ul li{proprietà} ul li a{proprietà} ul li a ul{proprietà} ul li a ul li{proprietà}
    eccetera    
    
    ```cioè indica tutti gli elementi predecedssori così che il tag cui assegnare lo stile sia identificato precisamente. 
    Attenzione anche che per applicare una stessa formattazione a più elementi usando selettori discendenti, non si scrive li a:link,visited,activema
    

    
    P.S.: oops, mentre scrivevo hai avuto già una risposta

  • User Attivo

    ciao,
    ho dovuto orientare il menù orizzontalmente.
    Tutto ok con firefox ma con IE sembra non funzionare.

    Vi posto il codice.

    Funzione javascript:

    
    sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls*.onmouseover=function() {
                this.className+=" over";
            }
            sfEls*.onmouseout=function() {
                this.className=this.className.replace(new RegExp(" over\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    ```Questo invece il css:
    

    ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 90%;
    }

    ul li {
    position: relative;
    float: left;

    }

    li ul {
    position: absolute;
    left: 0;
    top: auto;
    display: none;
    top: 50px;
    width: 90px;
    }
    li ul ul{
    position: absolute;
    left:100%;
    top: -.1em;
    display: none;
    width: 90px;
    font-size: 13px;
    padding-bottom: 2px;
    }

    /* Styles for Menu Items */
    ul li a {
    display: block;
    text-decoration: none;
    color: #FFF;
    background: #000;
    padding-top: 22px;
    padding-bottom: 14px;
    padding-left: 5px;
    padding-right: 5px;
    }

    li:hover a, li.over a {
    color: #ad995c;
    background-color:;
    }
    li:hover li:hover a, li.over li.over a,
    li:hover li:hover li:hover a, li.over li.over li.over a,
    li:hover li a:hover, li.over li a:hover,
    li:hover li:hover li:hover a:hover, li.over li li a:hover,
    li:hover li:hover li:hover li:hover a:hover, li.over li.over li.over li.over a:hover
    {
    color: #fff;
    background-color:;
    width: 90px;
    font-size: 13px;
    padding-bottom: 2px;
    }

    li:hover li a, li.over li a,
    li:hover li:hover li a, li.over li.over li a,
    li:hover li:hover li:hover li a, li.over li.over li.over li a
    {
    color:;
    background-color:;
    width:90px;
    font-size: 13px;
    line-height: 120%;
    }
    li ul li a { padding: 2px 5px; }
    ul li:hover ul ul, ul li:hover ul ul ul, ul li.over ul ul, ul li.over ul ul ul {
    display:none;
    }

    ul li:hover ul,ul li li:hover ul,ul li li li:hover ul, ul li.over ul, ul li li.over ul,ul li li li.over ul {
    display: block;
    }

    
    vi riangrazio per l'attenzione e spero che qualcuna possa darmi una mano.