Problema sub-menu troppo lungo

[fradamma]

Buongiorno a tutti,
vorrei chiedervi una cosa abbastanza semplice. Ho il seguente 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]

Ciao, potresti fare due <ul> da 3 <li> affiancate con float:left

 

[fradamma]

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

 

[criric]

prova cosi:

<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>