Level 2 Hover width / Level 3 position

index.asp

Level 2 is 180 pixels wide
When I hover over my Level 2 items with a Level 3, the Level 3 link appears at 100 pixels. I can only see the first one, the others are buried.

I think there are 2 problems.
1, Level 3 is not starting at 180 pixels, it is starting a 100
2, Level 3 may have a Z-index problem because the 2'nd through 3'rd items in this menu are appearing behind the level 2 items.

I cannot find what to change.

I can't seem to get the z-index to make any difference. You could add a left margin to your ( isi2010/CSSMenuWriter/cssmw2/menu.css ) 'ul#cssmw2 ul.level-2 > li > a {' rule:

ul#cssmw2 ul.level-2 > li > a {
background-image: url("../cssmw2_images/alpha80.png");
border-bottom: solid 1px #fff;
border-right: solid 1px #fff;
color: #173232;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
margin: 0 0 0 81px; // Changed from 0 0 0 0;
padding: 5px 5px 5px 5px;
text-decoration: none;
text-transform: uppercase;
width: 100px;
z-index:999;
}

Hopefully someone will advise re the z-index.

Neilo,

Z-Index ONLY works on positioned elements... so you have to define the position attribute (position:absolute, position:relative, or position:fixed) in your css rule for that particular element or the Z-Index is rendered useless.

Brian

Cheers Brian,

I think I have been reminded about this a couple of times already, this seems to be one of my numerous blind spots, many thanks for the info. This place is brilliant.

Works fine neilo, thanks.
I don't understand why the hack is necessary though. This should happen automatically.

I have a similar issue again with a vertical menu.
residential-hvac.php

The level 2 needs to start at 213 pixels and it is starting at 150, but level-2 does not appear in the CSS.

Also, only 3 of these menu items have sub items so I don't understand why I am getting the arrow on each level.

Please advise,

Sorted the image width, but still not sure about the arrows.

the arrows will be added to all menu levels, not just the ones that include sub menus.

you can edit the css and the menu so that only the ones that have submenus include the arrow.

in the menu.css file, look all instances of the following line:
background-image: url("../cssmw0_images/arrow.gif");


and comment it out;
/*background-image: url("../cssmw0_images/arrow.gif");*/


then in the menu, add an inline style to the menu items that you want to include the arrow on, for example:
<li class="parent"><a href="Products.php" style="background-image: url('plugins/CSSMenuWriter/cssmw0_images/arrow.gif'););">Products</a>