Help with css <nav> <ul> <li> drop down menu alignm

[Axel]

What I'm having difficulty with is that I want to make the menu do several things if it all possible:

1) Span the whole nav menu to the width of whatever the container div is.

2) Automatically space the list items in the top menu evenly without having to specify.

3) Wrap the text when required (only managed to achieve this so far by specifying width.)

4) When the menu item is a single word on a single line, align it vertically, not towards the top as it is now!

5) Ignoring the submenu items for the moment.

I've dumped the code here and you can see the current result:

http://jsfiddle.net/b2bUV/

css:

nav {
font: bold 12px Arial, Helvetica;
}

nav ul ul {
display: none
}

nav ul li:hover > ul {
display: block;
}

nav ul {
background: #e6e6e6;
padding: 0px 0px ;
border-radius: 5px;
border-style: solid;
border-width: 1px;
border-color:b3b3b3;
list-style: none;
position: relative;
display: inline-table;
text-align: center;

}
nav ul:after {
content: ""; clear: both; display: block;
}

nav ul li {
float: left;
width: 85.8px;
height: auto;
padding-left: 5px;
padding-right: 5px;
}
nav ul li:hover {
background: #c3c3c3;
}
nav ul li:hover a {
color: #fff;
}

nav ul li a {
display: block; padding: 10px 0px 10px 0px; height: 30px;
color: #000; text-decoration: none;
}

nav ul ul {
background: #b3b3b3; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #f2f2f2;
border-bottom: 1px solid #f2f2f2;
position: relative;
padding: 0px;
width: auto;
height: auto;
text-align: left;
}
nav ul ul li a {
padding: 0px 0px 0px 0px;
color: #fff;
}
nav ul ul li a:hover {
background: #757575;
}

nav ul ul ul {
position: absolute; left: 100%; top:0;
}

html:

<nav>
<ul>
<li><a href="#">Computer Parts</a>
<ul>
<li><a href="#">Sub-Menu Item</a></li>
<li><a href="#">Sub-Menu Item</a></li>
<li><a href="#">Sub-Menu Item</a></li>
</ul>
</li>
<li><a href="#">Desktops & Servers</a>
<ul>
<li><a href="#">Sub-Menu Item</a></li>
<li><a href="#">Sub-Menu Item</a></li>
<li><a href="#">Sub-Menu Item</a></li>
</ul>
</li>
<li><a href="#">Notebooks & Laptops</a>
<ul>
<li><a href="#">Sub-Menu Item</a></li>
<li><a href="#">Sub-Menu Item</a></li>
<li><a href="#">Sub-Menu Item</a></li>
</ul>
</li>
<li><a href="#">Software</a>
<ul>
<li><a href="#">Sub-Menu Item</a></li>
<li><a href="#">Sub-Menu Item</a></li>
<li><a href="#">Sub-Menu Item</a></li>
</ul>
</li>
<li><a href="#">Gaming</a>
<ul>
<li><a href="#">Sub-Menu Item</a></li>
<li><a href="#">Sub-Menu Item</a></li>
<li><a href="#">Sub-Menu Item</a></li>
</ul>
</li>
<li><a href="#">Accessories & Peripherals</a>
<ul>
<li><a href="#">Sub-Menu Item</a></li>
<li><a href="#">Sub-Menu Item</a></li>
<li><a href="#">Sub-Menu Item</a></li>
</ul>
</li>
<li><a href="#">Office Solutions</a>
<ul>
<li><a href="#">Sub-Menu Item</a></li>
<li><a href="#">Sub-Menu Item</a></li>
<li><a href="#">Sub-Menu Item</a></li>
</ul>
</li>
<li><a href="#">Printer & Inks</a>
<ul>
<li><a href="#">Sub-Menu Item</a></li>
<li><a href="#">Sub-Menu Item</a></li>
<li><a href="#">Sub-Menu Item</a></li>
</ul>
</li>
<li><a href="#">Networking</a>
<ul>
<li><a href="#">Sub-Menu Item</a></li>
<li><a href="#">Sub-Menu Item</a></li>
<li><a href="#">Sub-Menu Item</a></li>
</ul>
</li>
<li><a href="#">More</a>
<ul>
<li><a href="#">Sub-Menu Item</a></li>
<li><a href="#">Sub-Menu Item</a></li>
<li><a href="#">Sub-Menu Item</a></li>
</ul>
</li>
</ul>
</nav>

[Axel]

Come on experts - would reallly appreciate your help :D

[Seahorsepip Veteran]

gimme 10sec ;)

Edit: code seems messy :/

Gotta rewrite it :p You want a horizontal menu with dropdowns right?

[Axel]

Hey bud.

Ha yeah it's a bit messy as it was "frankensteined" from something I'd done previously and some other tutorial I found.

What I wanna achieve is a menu with drop downs (not decided how I want the drop downs to behave/look yet so not too worried about those).

The menu is going to go into a fixed width div sized 1020px with 30px of padding either side. This leaves 960px for the full width of the menu bar.

HOWEVER...

Lets assume we want to make this as flexible as possible whereby menu items can be removed or added and the whole thing wont get broken (within reason). So I want the menu items to space themselves evenly across the menu bar and the text to wrap onto two lines where appropriate. I also really want to get the text to vertically align to the middle of the menu bar but the vertical-align: middle tag doesnt seem to achieve that.

Hope this is not too much to ask, I know you've helped me before and very much appreciate you stepping up to the post again.

Many thanks :)

[Seahorsepip Veteran]

http://jsfiddle.net/b2bUV/79/

Just a quick thing I threw together, not sure if it's exactly as you wanted it :p

[threetonesun]

HOWEVER...

Lets assume we want to make this as flexible as possible whereby menu items can be removed or added and the whole thing wont get broken (within reason). So I want the menu items to space themselves evenly across the menu bar and the text to wrap onto two lines where appropriate. I also really want to get the text to vertically align to the middle of the menu bar but the vertical-align: middle tag doesnt seem to achieve that.

Hope this is not too much to ask, I know you've helped me before and very much appreciate you stepping up to the post again.

Many thanks :)

Without using javascript, or with it?

Without this is a huge PITA. In fact, I'm not sure there's even a way to get things to wrap at appropriate times without specifying a width, unless you're going to calculate string lengths.

[Seahorsepip Veteran]

I positioned the items on the left, making them use the whole bar like at apple.com requires js or css that breaks when a additional menu item is added :/

Edit seems possible but require IE9.js to work in IE8 and lower, I can give you a link to it if you want (I love IE9.js for my own sites btw :p)

[Axel]

Thanks seahorse! Thought I might have to resort to JS at some point would wanted to avoid it if at all possible as it's lost on me! I'll have to have a look at this later on / tomorrow and see what I can do when playing with it. Looks fantastic and more or less close to what I'm trying to achieve apart from these points:-

Trouble is that the bar wraps down onto another level if I attempt to implement it into the site. Bearing in mind there's only 960px width to work with. I wondered if rather than the list/navbar wrapping onto the next level, the actual text within the bar would wrap itself onto two or more lines instead. With evenly spaced menu items rather than ones of varying width? I hope this makes sense!

Gotta drive somewhere now but I'll hop back on here once i'm at my destination!

Many thanks!

[threetonesun]

Trouble is that the bar wraps down onto another level if I attempt to implement it into the site. Bearing in mind there's only 960px width to work with. I wondered if rather than the list/navbar wrapping onto the next level, the actual text within the bar would wrap itself onto two or more lines instead. With evenly spaced menu items rather than ones of varying width? I hope this makes sense!

Maths. :laugh:

Once you get to math, it's easier to use javascript. 960 / # of li elements will get you a width for each, or you can go further and get the string length of each entry and then figure out some loose calculation based on the font to size them, so that "Desktops and Laptops" doesn't get the same width as "Mac". You could also use this to adjust the line height for single line items so they line up with the middle of double line items.

How flexible does this need to be, BTW? Developing a menu like this for a completely open ended CMS theme is usually a nightmare.

[Seahorsepip Veteran]

Heres a pure css version ;) : http://jsfiddle.net/b2bUV/121/

And yes this does require IE9.js to work right on IE8 :p

If the menu items with long text are shortened too much consider changing the 12px font size to 11px this already makes a huge difference ^^

[Seahorsepip Veteran]

Developing a menu like this for a completely open ended CMS theme is usually a nightmare.

That and dropdowns are really bad for touchscreen devices I'll try every possible option before I think about a dropdown menu on my own sites :p

[Axel]

Thanks seahorse - it's getting there! Is there any way we can make the text wrap onto multiple lines rather than have it shortened as it is like in my original version or is that not possible??

I'm making an effort to go through the code and experiment but I fear I won't make much progress until tomorrow - currently playing with it via teamviewer on an ipad so as you can imagine it's not the ideal workstation right now!

Appreciate this :)

[Axel]

Maths. :laugh:

Once you get to math, it's easier to use javascript. 960 / # of li elements will get you a width for each, or you can go further and get the string length of each entry and then figure out some loose calculation based on the font to size them, so that "Desktops and Laptops" doesn't get the same width as "Mac". You could also use this to adjust the line height for single line items so they line up with the middle of double line items.

How flexible does this need to be, BTW? Developing a menu like this for a completely open ended CMS theme is usually a nightmare.

It's just an exercise to see how flexible I can make it I suppose! Maths? I love Maths! Trouble is I've never touched javascript and wouldnt know where to start! :p - Understand it may be the best/only solution though!

[threetonesun]

It's just an exercise to see how flexible I can make it I suppose! Maths? I love Maths! Trouble is I've never touched javascript and wouldnt know where to start! :p - Understand it may be the best/only solution though!

http://jsfiddle.net/b2bUV/124/

Just to get you started, using jQuery.