Horizontal CSS Menu IE7 Problem (2nd Child Fails)
Posted: Tue Nov 20, 2007 12:58 am
Hey,
I have a problem with a template I have installed called LazyDays. It implements a Horizontal CSS Menu that has a vertical drop-down that's based purely on CSS.
Now it works perfectly in Firefox, and not at all in IE (tested: IE7).
Link: http://chaosindustries.jarada.co.uk/
The 'Corp' link is supposed to drop down and show 'CEO' and 'Members'
I can't for the life of me figure out what's wrong. As requested in initial post, I hearby show you the CSS that makes up this menu. There is also some Javascript but it doesn't fix the problem (It's set to work by conditional commenting only in IE6, and when enabled for all of IE it doesn't fix this problem).
Ask if you need anything else. Thank you very much in advance! 
I have a problem with a template I have installed called LazyDays. It implements a Horizontal CSS Menu that has a vertical drop-down that's based purely on CSS.
Now it works perfectly in Firefox, and not at all in IE (tested: IE7).
Link: http://chaosindustries.jarada.co.uk/
The 'Corp' link is supposed to drop down and show 'CEO' and 'Members'
I can't for the life of me figure out what's wrong. As requested in initial post, I hearby show you the CSS that makes up this menu. There is also some Javascript but it doesn't fix the problem (It's set to work by conditional commenting only in IE6, and when enabled for all of IE it doesn't fix this problem).
Code: Select all
/**************************************************************
#mainMenu: The top level site menu
**************************************************************/
/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */
/* The wrapper clears the floating elements of the menu */
div#menuwrapper{position:relative;float:right;height: 10px;padding: 0}
div#wrapper{position:relative;float:left;height: 40px;padding: 0}
/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li {
width: 215px;
}
/* Unless you know what you do, do not touch this */
#primary-nav{float:right;;
list-style: none;
margin: 0px;
padding: 0px;
}
#primary-nav ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#primary-nav ul {
position: absolute;
top: auto;
display: none;
}
#primary-nav ul ul {
margin-top: 1px;
margin-left: -1px;
left: 100%;
top: 0px;
}
#primary-nav li {
margin-left: -1px;
float: left;
}
#primary-nav li li {
margin-left: 0px;
margin-top: -1px;
float: none;
position: relative;
}
/* Styling the basic apperance of the menu elements */
#primary-nav a {
font: 400 1.6em "trebuchet ms", serif;
text-decoration: none;
text-transform: lowercase;
color: #FFF;
display: block;
padding: 4px 10px;
text-decoration: none;
}
#primary-nav li a:hover {color: #65EBFF;
}
#primary-nav li li a {background-color:#555555;
}
#primary-nav li li a:hover {background-color:#444444;
}
#primary-nav li{
}
#primary-nav li.menuparent {
}
/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive { color: #65EBFF;
border-top: 5px solid #000;
}
#primary-nav li li.menuactive { color: #65EBFF;
border-top: 0px solid #000;
}
/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li .menuparent, #primary-nav ul li .menuparent:hover, #primary-nav ul li .amenuparent {
background-image: url(uploads/LazyDays/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}
/* Styling the apperance of menu items on hover */
#primary-nav li:hover{
color: #65EBFF;
border-top: 5px solid #000;}
#primary-nav li li:hover{border-top: 0px solid #000;}
#primary-nav li li a:hover{border-top: 0px solid #000;}
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
#primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul, #primary-nav li:hover ul ul ul,
#primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul, #primary-nav li.menuparenth ul ul ul {
display: none;
}
#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul, #primary-nav ul ul ul li:hover ul,
#primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul, #primary-nav ul ul ul li.menuparenth ul {
display: block;border:none;
}
/* IE Hacks */
#primary-nav li li {
float: left;
clear: both;
}
#primary-nav li li a {
height: 1%;
}
