PDA

View Full Version : Help with Expanding CSS Menu and IE6



raks
Aug 23rd, 2007, 12:31 PM
Hi,

I am working on a website with an expanding CSS Menu. On hover of a menu item, it expands with more menu items. It is using the on div hover, display:block option, but when using IE6, they do not expand.

Could anybody help me or know of anything/(where) i can get help from.

Thanks

Arbitrator
Aug 23rd, 2007, 01:00 PM
Could anybody help me or know of anything/(where) i can get help from.Itís doubtful that anyone will be able to help you without seeing all of the code that youíre using.

raks
Aug 23rd, 2007, 01:10 PM
Hi, sorry about that, the code is shown below. Firstly the CSS from my style sheet, followed by the page code. Please bear in mind, the code includes positioning values for my web page.

div.mainmenu {
position: absolute;
left: 268px;
top: 144px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #000000;
z-index: 1;
list-style-image:url(images/arrow.jpg);
width: 641px;
cursor: pointer;
}

div.menu {
float:left;
text-align:left;
margin-right: 1px;
}

div.menu:hover div:first-child { border-bottom: none; }
div.menu div.popup { display: none; }
div.menu:hover div.popup {
display:block;
position: absolute;
bottom: 15px;
margin-left:16px;
color: #000000;
}


div.menu div {
padding: 2px;
}


div.popup div, div.popup a { display:block; text-decoration: none; margin: 2px 2px 2px 3px; }
div.popup div + div, div.popup a + a { margin-top: 5px; }




PAGE CODE

Each Menu Item appears like this. there are about 5 of these consecutively.

<div class="menu">
<div>Menu Heading</div>
<div class="popup">
<li><a href="index.html">Menu Item 1</a></li>
<li><a href="index.html">Menu Item 2</a></li>
</div>
</div>

Arbitrator
Aug 23rd, 2007, 04:05 PM
I am working on a website with an expanding CSS Menu. On hover of a menu item, it expands with more menu items. It is using the on div hover, display:block option, but when using IE6, they do not expand.

Could anybody help me or know of anything/(where) i can get help from.Internet Explorer 6 does not support the hover pseudo‐class on any element other than a. Internet Explorer 6 also exhibits no support for the first-child pseudo‐class or the adjacent sibling combinator (+).

Possibly Related: Your HTML contains a validity error; li elements may only occur as children of ul or ol elements.

Not Related: Headings are better represented with the h1 through h6 elements than with semantically neutral div elements.