Arrows Hover Over the Menu

[webskipper]

Smooth Menu: dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

Layout: dynamicdrive.com/style/layouts/item/css-liquid-layout-22-fluid-fixed/

We need to have the menu fill the page 100% and be fluid.

The arrows hover over the left of the drop downs and cover the top menu as the window size adjusts.

Do I need to define each drop down box or decrease the boxes?

Also, any fixes for IE6 would be helpful.

I am trying to get the site to work in IE6 and modern browsers.

[webskipper]

Anyone?

[ddadmin]

It seems one of the issues with the arrows stems from the fact that you've set a fixed width for each of the menu items, or the line in red below:

.ddsmoothmenu ul li
{
	position: relative;
	display: inline;
	float: left;
	width: 8.333%;
	white-space: nowrap;

}

Try removing that, then adjust the position of the arrow image so it's further down from its baseline:

.downarrowclass{
position: absolute;
top: 12px;
right: 2px;
}

[webskipper]

Thank you for your reply, We are going backwards.

The width is there to get the menu to fill the width and be fluid. Without it, it sits left. That does not look correct.

Moving the arrows does nothing because they overlap the menu items as you adjust the window.

I believe what the issue is, is cramming too many items in the menu. Most sites have a few items that will drop down and my users cry when all 350 pages are not in the menu.

[webskipper]

Fixed it.

I had to define each UL LI. Home and Back buttons are defined in pixels, the middles are percentages. Now how do we prevent wrapping? Min-Width is not controlling wrapping?

.ddsmoothmenua
{
position: relative;
display: inline;
float: left;
white-space: nowrap;
text-transform: uppercase;
width: 55px;
border-right: 1px #000 inset;
}

.ddsmoothmenub
{
position: relative;
display: inline;
float: left;
white-space: nowrap;
text-transform: uppercase;
width: 9%;
border-right: 1px #000 inset;
}

[ddadmin]

Hmm if the menu's width is fluid, it's hard to specify that it shouldn't wrap when the page is resized, since the two are contradictory. You can try using using "min-width" inside the menu class to set the minimum width the menu must consist of, though this property is buggy in certain versions of IE.

[webskipper]

What is the best route to take here?

[ddadmin]

This falls into one of those "try a few things and see which one works" CSS hacks sort of issue. I wouldn't be able to tell you right off the bat a 100% fool proof method- it'll take some experimenting on your part with the CSS.

[webskipper]

Urgent:

In IE7 today, the hover creates spaces and the cursor will hit these and turn off the drop down menu.

It is not working in IE7. You loose the whole menu after about 3 down.