CODEWITHSUNDEEP
htmlcss
Abhinav
Abhinav

Reputation: 3428

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

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

Upvotes: 5

Views: 476

Answers (1)

dr.dimitru
dr.dimitru

Reputation: 2702

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

Upvotes: 1

Related Questions