Jump to content

Menu design completely broken in IE


P3t3r

Recommended Posts

I finished building my roll-out menus for firefox, but they're not working in IE. Moreover they get stacked on top of eachother instead of next to eachother.

 

http://www.problem-solving.be/dir0

 

Can anyone help me how to solve it? Here's the related CSS:

 

/* Drop-down menu */
.nav2 {}
.nav2 ul {
list-style-type:none;
}
.nav2 ul li {
float:left;
position:relative; 
z-index:auto !important /*Non-IE6*/; 
z-index:1000 /*IE6*/;
	background: #C7D0D7; /*url(images/css/css_cat_light.jpg) repeat-x;*/
left:-20;
}
.nav2 ul li a {
float:none !important /*Non-IE6*/; 
float:left /*IE-6*/; 
display:block; 
height:28px; 
width:90px;
line-height:28px; 
padding:0 20px 0 20px;
text-decoration:none; 
font-weight:bold; 
color: #006699;
}
.nav2 ul li ul {
display:none; 
border:none;
}

/* Non-IE6 hovering */
.nav2 ul li:hover a {
text-decoration: none;
}
.nav2 ul li:hover ul {
display:block; 
position:absolute; 
z-index:999; 
top:3.0em-6; 
left:-20;
}
.nav2 ul li:hover ul li a {
display:block; 
width:88px; 
height:auto; 
line-height:1em; 
/*margin-left:50px;*/ 
padding:2px 20px 2px 20px; 
border-left:solid 1px rgb(175,175,175); 
border-right:solid 1px rgb(175,175,175); 
border-bottom: solid 1px rgb(175,175,175);
background-color:#EFEFEF; 
font-weight:normal; 
color:rgb(50,50,50);
}
.nav2 ul li:hover ul li a:hover {
background-color:#FFFFFF;
}
.nav2 ul li a:hover {
/*background: #DFDFEF;*/ /*#006699;*/ /*url(images/css/css_cat.jpg) repeat-x; */
/*color:#DEEEF3;*/
}

.nav2 table {position:absolute; top:0; left:0; border-collapse:collapse;}
.nav2 ul li a:hover ul {display:block; position:absolute; z-index:999; top:3.1em; t\op:3.0em; left:0; marg\in-top:0.1em;}
.nav2 ul li a:hover ul li a {display:block; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
.nav2 ul li a:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;} /*Color subcells hovering mode*/

 

Thanks!

Link to comment
https://forums.phpfreaks.com/topic/86892-menu-design-completely-broken-in-ie/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.