CODEWITHSUNDEEP
jqueryhtmlcssnavbar
p2or
p2or

Reputation: 339

How to build vertical navigation with horizontal sub menu in one line?

I have to build a vertical navigation. It's a bit special because the sub navigation should be displayed right next to the main links in the same row by clicking the main links like this:

 Item 1 
 Item 2   Subitem 1 | Subitem 2 
 Item 3
 Item 4   Subitem 1 | Subitem 2 
 Item 5

It works as expected, but if main links have a sub, main links will be displayed after the sub menu instead of displaying it before. I thougt it makes sense to use float:left; for the .sub-menu to get both on the same row. But with this it looks like:

 Item 1 
 Subitem 1 | Subitem 2    Item 2
 Item 3
 Subitem 1 | Subitem 2    Item 4
 Item 5

Here is the fiddle. Any help would be appreciated.

Upvotes: 0

Views: 189

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337714

You just need to float the li elements in the top level menu left, as well as those in .sub-menu:

ul > li > a {
    float: left;
    clear: both;
}
.sub-menu {
    display: none;
    float: left;
}
.sub-menu li {
    float: left;
}

Updated fiddle

Upvotes: 3

Related Questions