• B
    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.
    0
  • K
    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!
    0
  • P
    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
    0
  • B
    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.
    0
Effettua l'accesso per rispondere