Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make other li elements wrap around when one li element height increases

Tags:

html

css

I am working on a drop down menu. Trouble that I am facing is that, I have a 3 level of <ul>, and in second level when height of a <li> increases because it was accommodating another <ul> then all other <li> of second level do not wrap around it.

You can visualize the situation in this Fiddle

when you hover your mouse over Technology then you would be able to see that size of Web Design <li> is greater because of another <ul> that it is accommodating, because of that Typography and Front end has dropped below. Is there any way to keep them wrapping around?

Html structure is like this:

<nav id="nav" role="navigation">
<ul class="clearfix">
    <li> <a href="?work"><span>Technology</span></a>
        <ul>
            <li><a href="#">Hot news</a></li>
            <li><a href="#">Sad news</a></li>
            <li><a href="#">Normal news</a></li>
            <li><a href="?webdesign">Web Design</a>
                <ul>
                    <li><a href="#">Super power</a>
                    </li>
                    <li><a href="#">Aim Gain</a>
                    </li>
                    <li><a href="#">Acheivers</a>
                    </li>
                    <li><a href="#">Lackers</a></li>
                </ul>
            </li>
            <li><a href="?typography">Typography</a>
            </li>
            <li><a href="?frontend">Front-End</a>
            </li>
        </ul>
    </li>
    <li><a href="?about">Personal Stuff</a>
    </li>
</ul>

EDIT: Attaching few screenshots This image shows present problem, see position of Typography and Front-end

This image shows the problem I am facing, see **Typography** and **Front-end**

Following image shows what I am trying to achieve, see position of Typography and Front-end

This image shows what I am trying to achieve, see **Typography** and **Front-end**

like image 436
Abhi Avatar asked Nov 12 '22 19:11

Abhi


1 Answers

Here you go: JSFiddle

UPD: JSFiddle in acc to screenshot (Need to update CSS rules)

UPD: JSFiddle example based on classes

I've just removed the margin-left:20px; on #nav li ul li > ul

Tested on Safari 6.1 (Mac OS X 10.9) | UPD: additionally tested on Chrome (30) & FF (23.0.1) under Mac OS X 10.9

like image 138
dr.dimitru Avatar answered Dec 15 '22 19:12

dr.dimitru