Forum Moderators: not2easy
I have a drop down menu that works on firefox but not IE8.
The website is <snip>
When you hover over the menu you can see how the box is messed up.
Also if you click on About me or another page the menu is expanded and stretched on the page.
I only see this issue on IE8.
It should look like how firefox displays it.
Anyways here is the header_menu.css code.
Any help is appreciated
Thanks
/* CSS Document */
/* Start header menu */
#menu {
width: 100%;
/*background: #939192;*/
float: left;
margin:0 0 0 -90px;
padding:0;
z-index:500;
}
#menu ul {
list-style: none;
margin: 0 0 0 0;
padding:0;
float: left;
}
#menu a{
color: #fff;
text-decoration: none;
white-space:nowrap;
}
#menu a:hover{
color: #fff;
}
#menu h2{
font-weight:normal;
margin:0;
width:100%;
display:block;
padding:0;
}
#menu li {position: relative; left:0px;margin:0;z-index:500;}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
z-index:500;
}
#menu ul ul{
position: absolute;
z-index: 500;
width: 12em;
left:0px;
margin-top:5px;
padding-top:9px;
background-image:url(/design_images/dropnav_bg.png);
background-repeat:repeat;
}
#menu ul li{
padding: 7px 10px 5px 10px;
margin:-2px 0 0 60px;
/*background:#939192;*/
}
#menu ul li:hover {
background:#EB9203;
}
#menu ul ul li {
padding:7px 0px 7px 0px;
margin:0 0 0 0;
/*background:#939192;*/
text-align:center;
font-weight:bold;
font-size:12px;
cursor:pointer;
/*border-bottom:solid 1px #fff;*/
z-index:500px;
}
#menu ul ul li a {
font-weight:normal;
font-size:12px;
}
#menu ul ul li:hover {
background:#EB9203;
}
div#menu ul ul {
display: none;
}
div#menu ul li:hover ul
{display: block;}
div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,div#menu ul ul li:hover ul,div#menu ul ul ul li:hover ul
{display: block;}
/* End css header menu */
#menu a:hover{text-decoration:none;}
.headerMenuLink {
width:150px;
}
#headerMainCell {
height:61px;
vertical-align:middle;
}
#headerMainCell h1 {
color:#ffffff;
margin:18px;
}
.headerMenuCell {
background-color: #479C23;
text-align: left;
font-size:12px;
color:#FFFFFF;
font-weight:normal;
padding:2px 0 0 40px;
height:20px;
vertical-align:middle;
text-transform:uppercase;
}
.headerMenuCell a {
color:#ffffff;
font-size:12px;
}
/* End css header menu */
--
No URL's please, see TOS [webmasterworld.com]
[edited by: limbo at 8:58 pm (utc) on Dec. 28, 2009]
Here's what it looks like now on two pages:
[i265.photobucket.com...]
Here's how it should look:
[i265.photobucket.com...]
