Problema sub-menu troppo lungo

fradamma

Utente Attivo
28 Set 2012
93
0
0
Buongiorno a tutti,
vorrei chiedervi una cosa abbastanza semplice. Ho il seguente codice:

Codice:
<ul class="scope">
        <li><a class="" href="">link1</a></li>
        <li><a class="" href="">link2</a></li>
            <ul class="sub-scope" style="">
               <li class="sub-link">
                    <a class="" href="">sublink1</a>
                </li>
               <li class="sub-link">
                    <a class="" href="">sublink2</a>
                </li>
                <li class="sub-link">
                    <a class="" href="">sublink3</a>
                </li>
                <li class="sub-link">
                    <a class="" href="">sublink4</a>
                </li>
                <li class="sub-link">
                    <a class="" href="">sublink5</a>
                </li>
                <li class="sub-link">
                    <a class="" href="">sublink6</a>
                </li>
            </ul>
        </li>
        <li><a class="" href="">link3</a></li>
        <li><a class="" href="">link4</a></li>
    </ul>
Si tratta di un menu orizzontale con un secondo <li> che ha un submenu a tendina in dropdown. Quello che vorrei fare è evitare che il submenu sia troppo lungo e finisca troppo in basso. Per cui vorrei che al click su "link2" le 6 <li> della tendina drobdown si posizionino tre sulla sinistra e tre sulla destra, risparmiando in lunghezza. Potete darmi una mano? Grazie!
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, potresti fare due <ul> da 3 <li> affiancate con float:left
 

fradamma

Utente Attivo
28 Set 2012
93
0
0
Ciao Criric,
purtroppo non alcuna possibilità di manipolare l'html...dovrei intervenire solo sui css (al massimo posso inserire classi e id).
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
prova cosi:
HTML:
<style>
    ul.sub-scope {
        width: 200px;
    }
    ul.sub-scope li {
        width: 100px;
        float:right;
    }
    ul.sub-scope li:nth-child(2n) {
        float:left;
    }
</style>
<ul class="scope">
    <li><a class="" href="">link1</a></li>
    <li><a class="" href="">link2</a></li>
    <ul class="sub-scope" style="">
        <li class="sub-link">
            <a class="" href="">sublink1</a>
        </li>
        <li class="sub-link">
            <a class="" href="">sublink2</a>
        </li>
        <li class="sub-link">
            <a class="" href="">sublink3</a>
        </li>
        <li class="sub-link">
            <a class="" href="">sublink4</a>
        </li>
        <li class="sub-link">
            <a class="" href="">sublink5</a>
        </li>
        <li class="sub-link">
            <a class="" href="">sublink6</a>
        </li>
    </ul>
</li>
<li><a class="" href="">link3</a></li>
<li><a class="" href="">link4</a></li>
</ul>