Reply To: Best approach to creating a horiz menu bar?

[paulob]

Hi,

I’m not sure which items you want to change the height of as they look vertically centred to me (assuming you are catering for ascenders and descenders). You could set line-height:20px on the anchors if you want slightly more depth but that won’t change the vertical-alignment as such although it does default to the middle of that line-height. If you want to tweak by eye then just add some padding-top to the anchors as required. You don’t want to be using margins as such in here.

The overlap on the menu is because you haven’t actually started below the items so you will need to raise the z-index on hover.

e.g.

.top-nav li:hover{z-index:99}/* any number larger than the normal menu items */

To change the width of the top items you could just apply the width to the top level using the child selector but it may look odd as they aren’t all the same amount of text. You will also have to change the width of the parent if you don’t want them to wrap.

e.g.

nav{width:auto;background:none} .top-nav > li{width:110px}

I’m not sure if that’s what you meant though. If you just want to change a couple of the top level items then add a unique class to them and change their width that way.

e.g.

.top-nav > li.item1 {width:110px}