I’m building a wordpress theme and I’m stuck on my footer menu.
I want to display the menu like this picture.
The menu items contain sub menu items so the html is like this:
<ul>
<li>
Menu item 1
<ul id="submenu">
<li>
sub menu item 1
</li>
<li>
sub menu item etc
</li>
</ul>
</li>
<li>
Menu item 2
<ul id="submenu">
<li>
sub menu item 1
</li>
<li>
sub menu item etc
</li>
</ul>
</li>
</ul>
Like this it puts it vertical on top of each other of course, floating the li puts all the main menu items next to each other.
But what I have to make according to the design is that the main menu item gets to the next column when the div height runs out.
It has to be dynamic otherwise I would have used CSS selectors.
Something with javascript/jquery maybe?
Thanks.
I didn’t think it would be relevant but here is the CSS I currently use which just floats the items left
.sub-menu .menu-item {
margin-top: 0!important;
clear: both;
margin-right: 0;
}
#lastfooter ul {
padding-top: 8px;
}
#lastfooter ul li {
float: left;
margin-right: 15px;
}
#lastfooter ul li a{
color: #000;
text-decoration: none;
}
#lastfooter ul li a:hover{
color: #e74d25;
}
You do not clearly define how you want the menu to work …
Maybe the CSS multi-column layout is what you are looking for (for moderns browsers only)
More complete demo at http://jsfiddle.net/gaby/Y88YZ/
You have to manage these with CSS. Try the below code:
http://jsfiddle.net/sushilkandola/82HHJ/