I am currently working on a dropdown menu and I'm encountering an issue where, in the second level of <ul>, if the height of an <li> increases due to accommodating another <ul>, the other <li> elements in the second level do not wrap around it.
You can see this situation in action in this Fiddle
When hovering over Technology, you will notice that the size of the Web Design <li> is larger because of the additional <ul> it contains, causing Typography and Front end to drop below. Is there a way to make them wrap around instead?
The HTML structure looks 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="#">Achievers</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: Adding some screenshots This image illustrates the current issue, showing the position of Typography and Front-end
The following image showcases my desired outcome, displaying the positioning of Typography and Front-end