Wrapped menu item "overlays" on top of drop-down menu items

[mharpen]

Hi J. Someone who has large fonts set on their mac sent this image to me.
http://tinypic.com/r/14ui8au/6

Is it possibly you can change the z-order of the “drop-down sub-menu items” so they overlay on top of any possible wrapped menu items? Also, just wondering if you know if it’s possible somehow to prevent the menu fonts from going to larger fonts due to the user’s preferences, to avoid the menu wrapping? At normal fonts size this menu has plenty of room on the right side. Thanks as always!

Topic

[mharpen]

I tried setting z-index all over the place on sub-menus and couldn’t get the sub-menu to overlay on top of the wrapped around menu item. After a few hours i figured out why. Here’s the CSS to solve it, and my comment which explains it. This prevents an even more messy situation, when both the wrapped around menu below has a sub-menu also. It’s then pretty much imposible to select a sub-menu item. This scenario can happen if someone has a small resolution monitor, small browser window, or large fonts.

Jason, when you build the menu in the php, you might want to add a sequential z-index to each main menu, or put this CSS in the next update. Thanks.

/*ensure submenus overlay any main menu items that may have wrapped below menu bar.
	since submenus are absolute positioned inside relative positioned main menus,
	then 1st main menus need higher z-indexex so submenu can overlay)*/
#main-menu ul li:nth-child(1) {z-index:1009}
#main-menu ul li:nth-child(2) {z-index:1008}
#main-menu ul li:nth-child(3) {z-index:1007}
#main-menu ul li:nth-child(4) {z-index:1006}

[Author]

Replies