Permabanned
- Joined
- 21 Dec 2006
- Posts
- 127
I've got a CSS dropdown that works fine in IE6 & Firefox but fails to do jack in IE7. Can anyone have a quick glance over it and see if they can spot anything obvious? Cheers.
Code:
/* Main Nav Styles */
.head_menu {
background: rgb(255, 255, 255);
border: 0;
float: left;
font-family: Arial, sans-serif;
font-size:11px;
margin: 0;
width: 610px;
z-index: 2;
}
/* Main Bar */
.head_menu ul {
border: 0;
padding:0;
margin:0;
list-style-type:none;
z-index: 2;
}
/* Individual top boxes */
.head_menu ul li {
background: rgb(245, 245, 245);
float: left;
position: relative;
z-index: 2;
}
/* Individual top boxes, generic list */
.head_menu ul li a, .head_menu ul li a:visited {
border: 1px solid rgb(255, 255, 255);
border-bottom: 1px solid rgb(255, 255, 255);
color: rgb(255, 0, 0);
display: block;
float: left;
height: 40px;
margin: 0;
padding: 0;
text-decoration: none;
width: 86px;
z-index: 2;
}
/* This will be ignored by IE */
html>body .head_menu ul li a, .head_menu ul li a:visited {
width: 84px;
z-index: 2;
}
.head_menu ul li:hover {
width: auto;
z-index: 2;
}
.head_menu ul li a.head_menuone, .head_menu ul li a.head_menuone:visited {background-image: url('../_images/head_about.gif'); z-index: 2;}
.head_menu ul li a.head_menutwo, .head_menu ul li a.head_menutwo:visited {background-image: url('../_images/head_industries.gif'); z-index: 2;}
.head_menu ul li a.head_menuthree, .head_menu ul li a.head_menuthree:visited {background-image: url('../_images/head_solutions.gif'); z-index: 2;}
.head_menu ul li a.head_menufour, .head_menu ul li a.head_menufour:visited {background-image: url('../_images/head_business.gif'); z-index: 2;}
.head_menu ul li a.head_menufive, .head_menu ul li a.head_menufive:visited {background-image: url('../_images/head_news.gif'); z-index: 2;}
.head_menu ul li a.head_menusix, .head_menu ul li a.head_menusix:visited {background-image: url('../_images/head_investors.gif'); z-index: 2;}
.head_menu ul li a.head_menuseven, .head_menu ul li a.head_menuseven:visited {background-image: url('../_images/head_contact.gif'); z-index: 2;}
.head_menu ul li a.head_menuone:hover {background-image: url('../_images/head_about_ov.gif'); border-bottom: 1px solid rgb(155,40,105); z-index: 2;}
.head_menu ul li a.head_menutwo:hover {background-image: url('../_images/head_industries_ov.gif'); border-bottom: 1px solid rgb(80,35,100); z-index: 2;}
.head_menu ul li a.head_menuthree:hover {background-image: url('../_images/head_solutions_ov.gif'); border-bottom: 1px solid rgb(225,70,40); z-index: 2;}
.head_menu ul li a.head_menufour:hover {background-image: url('../_images/head_business_ov.gif'); border-bottom: 1px solid rgb(210,25,95); z-index: 2;}
.head_menu ul li a.head_menufive:hover {background-image: url('../_images/head_news_ov.gif'); border-bottom: 1px solid rgb(245,210,25); z-index: 2;}
.head_menu ul li a.head_menusix:hover {background-image: url('../_images/head_investors_ov.gif'); border-bottom: 1px solid rgb(240,120,40); z-index: 2;}
.head_menu ul li a.head_menuseven:hover {background-image: url('../_images/head_contact_ov.gif'); border-bottom: 1px solid rgb(155,40,105); z-index: 2;}
.head_menu ul li:hover a.head_menuone {background-image: url('../_images/head_about_ov.gif'); border-bottom: 1px solid rgb(155,40,105); z-index: 2;}
.head_menu ul li:hover a.head_menutwo {background-image: url('../_images/head_industries_ov.gif'); border-bottom: 1px solid rgb(80,35,100); z-index: 2;}
.head_menu ul li:hover a.head_menuthree {background-image: url('../_images/head_solutions_ov.gif'); border-bottom: 1px solid rgb(225,70,40); z-index: 2;}
.head_menu ul li:hover a.head_menufour {background-image: url('../_images/head_business_ov.gif'); border-bottom: 1px solid rgb(210,25,95); z-index: 2;}
.head_menu ul li:hover a.head_menufive {background-image: url('../_images/head_news_ov.gif'); border-bottom: 1px solid rgb(245,210,25); z-index: 2;}
.head_menu ul li:hover a.head_menusix {background-image: url('../_images/head_investors_ov.gif'); border-bottom: 1px solid rgb(240,120,40); z-index: 2;}
.head_menu ul li:hover a.head_menuseven {background-image: url('../_images/head_contact_ov.gif'); border-bottom: 1px solid rgb(155,40,105); z-index: 2;}
.head_menu ul li ul {
display: none;
z-index: 2;
}
.head_menu table {
margin: 0;
border-collapse: collapse;
font-size: 11px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
/* FF browsers */
.head_menu ul li:hover ul {
display: block;
position: absolute;
top: 42px;
margin-top: 0;
left: 0;
width: 172px;
border: 1px solid rgb(205,205,205);
z-index: 2;
}
/* Used for the reverse submenu */
.head_menu ul li:hover ul.endstop {
left:-92px;
z-index: 2;
}
.head_menu ul li:hover ul li ul {
display: none;
z-index: 2;
}
/* FF browsers - submenu options non link */
.head_menu ul li:hover ul li a {
background: rgb(240,240,240);
border: 0;
color: rgb(85,85,85);
display: block;
height: auto;
padding: 5px 5px;
width: 162px;
z-index: 2;
}
/* FF browsers - submenu options with link */
.head_menu ul li:hover ul li a.drop {
background: rgb(240,240,240) url('../_images/small_red_pointer.gif') no-repeat 152px 8px;
z-index: 2;
}
/* FF browsers - submenu options with link hover */
.head_menu ul li:hover ul li a:hover {
color: rgb(155,155,155);
z-index: 2;
}
/* FF browsers - submenu options with link hover */
.head_menu ul li:hover ul li a:hover.drop {
color: rgb(155,155,155);
background: rgb(240,240,240) url('../_images/small_red_pointer.gif') no-repeat 152px 8px;
z-index: 2;
}
/* FF IE browsers - sub submenu */
.head_menu ul li:hover ul li:hover ul {
border: 1px solid rgb(205,205,205);
display: block;
position: absolute;
left: 172px;
top: -1px;
z-index: 2;
}
/* For unused reverse menu */
.head_menu ul li:hover ul li:hover ul.left {
left: -172px;
z-index: 2;
}
/* specific to IE5.5 and IE6 browsers - Could do border all way round */
.head_menu ul li a:hover ul {
display: block;
position: absolute;
top: 40px;
t\op: 40px;
background: rgb(240,240,240);
left: 1px;
border: 1px solid rgb(205,205,205);
z-index: 2;
}
/* For unused reverse menu */
.head_menu ul li a:hover ul.endstop {
left: -92px;
z-index: 2;
}
/* specific to IE5.5 and IE6 browsers - submenus without further sub */
.head_menu ul li a:hover ul li a {
background: rgb(240,240,240);
border: 0;
color: rgb(85,85,85);;
display: block;
height: 1px;
/* line-height: normal; */
padding: 5px;
width: 168px;
z-index: 2;
}
/* specific to IE5.5 and IE6 browsers - submenus with further sub */
.head_menu ul li a:hover ul li a.drop {
color: rgb(85,85,85);
background: rgb(240,240,240) url('../_images/small_red_pointer.gif') no-repeat 152px 8px;
z-index: 2;
}
.head_menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height:0;
width:0;
z-index: 2;
}
/* specific to IE5.5 and IE6 browsers - submenus rollovers */
.head_menu ul li a:hover ul li a:hover {
color: rgb(155,155,155);
z-index: 2;
}
/* specific to IE5.5 and IE6 browsers - submenus with further sub rollover */
.head_menu ul li a:hover ul li a:hover.drop {
color: rgb(155,155,155);
background: rgb(240,240,240) url('../_images/small_red_pointer.gif') no-repeat 152px 8px;
z-index: 2;
}
/* specific to IE5.5 and IE6 browsers - sub submenu */
.head_menu ul li a:hover ul li a:hover ul {
border: 1px solid rgb(205,205,205);
color: rgb(205,205,205);
left: 168px;
position: absolute;
top: -1;
visibility: visible;
z-index: 2;
}
/* For unused reverse menu */
.head_menu ul li a:hover ul li a:hover ul.left {
left: -172px;
z-index: 2;
}
/* End Main Nav Styles
Last edited:
