How to fix the drop down menu in older IE

HTML & CSS
1

Hi,
Does anyone how to fix this drop down menu bug in older version of IE. Here is the link to see,

http://lauthiamkok.net/works/design/web/hillcrest_2010/

All browsers work fine and IE 8 but not IE 6 or IE 7…

Here is the HTML,

<div id="menu-header">
    
    <ul class="menu-parent">
        <li id="menu-home"><a href="#"><span>Home</span></a></li>
        <li id="menu-about-us"><a href="#" class="current"><span>About us</span></a>
        
        	<ul id="submenu-about-us" class="submenu">
                <li id="menu-history"><a href="#"><span>History</span></a></li>
                <li id="menu-objectives"><a href="#"><span>Objectives</span></a></li>
                <li id="menu-properties"><a href="#"><span>Properties</span></a></li>
                <li id="menu-personnel"><a href="#"><span>Personnel</span></a></li>
                <li id="menu-referees"><a href="#"><span>Referees</span></a></li>
                <li id="menu-fees"><a href="#"><span>Fees</span></a></li>
            </ul>
     
        </li>
        
        <li id="menu-residential-services"><a href="#"><span>Residential Services</span></a>
        	
        	<ul id="submenu-residential-services" class="submenu">
                <li id="menu-budgets"><a href="#"><span>Budgets</span></a></li>
                <li id="menu-insurance"><a href="#"><span>Insurance</span></a></li>
                <li id="menu-maintenance"><a href="#"><span>Maintenance</span></a></li>
                <li id="menu-other-services"><a href="#"><span>Other Services</span></a></li>
            </ul>
        	<!---->
        </li>
        
        <li id="menu-right-to-manage"><a href="#"><span>Right to Manage</span></a></li>
        <li id="menu-property-developers"><a href="#"><span>Property Developers/Landloards</span></a></li>
        <li id="menu-the-team"><a href="#"><span>The Team</span></a></li>
        <li id="menu-faq"><a href="#"><span>FAQ</span></a></li>
        <li id="menu-useful-links"><a href="#"><span>Useful Links</span></a></li>
    </ul>
    
    </div>
    <!--menu_header-->

CSS,

/*menu header style*/
#menu-header {
	margin:0px 0px -5px 0px;
	background:#ffffff;
	}
	
#menu-header ul{
	clear:both;
	}
	
.menu-parent {
	width:100%;
	height:35px;
	background:#30302e;
	}

.menu-parent > li > a {
	float:left;
	height:30px;
	color:#ffffff;
	text-decoration:none;
	}
		
.menu-parent > li > a:hover {
	text-decoration:none;
	}
	
.submenu {
	display:none;/**/
	position:absolute;
	margin:31px 0px 0px 0px;
	background:#30302e;
	width:915px;
	overflow:hidden;
	}
	
.submenu > li > a {
	/*display:none;*/
	float:left;
	height:24px;
	color:#ffffff;
	text-decoration:none;
	}

#menu-header span {
	visibility:hidden;
	}

Many thanks,
Lau

2

The hover isn’t going to work for IE6 - you’ll need some JavaScript to work around that. IE6 also doesn’t recognise the > filters in the CSS.

Why it isn’t working in IE7 isn’t so obvious.

3

the drop down appears when the button is click - there is nothing to do with hover at all.

when the ‘About Us’ button is clicked, you see the sub menu (drop down).

the bug is the spacing of the sub menu in the older version of IE - you can see the difference clearly if u run ‘Compatibility View’ on IE 8.

thanks.

4

The drop list has position absolute, but there is no relative context for it that I can see.

Try adding this line:


li {
float:left;
[COLOR="Red"]position: relative;[/COLOR]
}

Instead of using a top margin, it might be better to use top: 31px;

E.g.


.submenu {
[COLOR="Red"]top: 31px;[/COLOR] /* instead of margin:31px 0 0; */
}
5

hi thanks. now it works fine on the older version of IE but doesnt work on the rest of other browsers including IE 8… :sick:

have a look on the link again then u can see what i mean…

thanks.

6

hi, somehow i got it fix just with this code,

.submenu {
top: 31px; /* instead of margin:31px 0 0; */
}

without this,

li {
float:left;
position: relative;
}

:shifty:

at least it works for now… thanks

7

Hmm, the #header margin (0px 0px 60px;) is messing it up on my Mac (FF and Safari).

8

To fix IE6 you would need to remove all the child selectors (>) from the menu (as already mentioned by fellgall above) and simply style any nested elements specifically.

It looks to me as though you can just remove nearly the child selector from the existing rules without much ill effect.

You would then need to add this for ie6 only.


* html #menu-header{height:30px}

You may need to tweak some of the nested elements if unwanted styles are cascading through but it looks more or less correct to me at a quick glance.

9

hi guys, thanks.

I have removed all the child selectors (>) and added height:30px to the #menu-header,

#menu-header {
	margin:0px 0px 0px 0px;
	background:#ffffff;
	height:30px;
	}

#header margin (0px 0px 60px 0px) is handle by jquery,

if ($(".current").next().length >0) {
		$("#header").css({
		margin:'0px 0px 60px 0px'
		});
	}

It looks fine on my PC, sorry don’t have a MAC, can’t check… Hope it looks fine on your MAC now?

Many thanks guys :slight_smile:

10

The site looks the same on Mac as on PC… Although there is a large white gap between the menu and the content in both. Do you really want that gap? I was assuming it was a mistake, hence my comments above.

11

oic got what u mean. the white gap between the menu/ drop list and the content is temporary - will take that off when the entire programme is completed.

many thanks for you help :smiley: