Hi - i've read through a lot of posts but can't spot an answer. It's probably something silly but....
I installed everything ok and on firefox the menu works fine. However in IE8 the menu opens on top of the top category which looks a bit messy!
The sites local so i can't show you as such but here's my stylesheet and screenshot:-
body {
behavior: url(includes/csshover.htc);
}
/*green
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#0066CC;}
*/
/*blue*/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#0066CC;}
/*red
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#0066CC;}
*/
/*grey
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#0066CC;}
*/
#contentMainWrapper {z-index:0;}
div#dropMenu {
width:100%;
margin:0;
text-align:center;
z-index:1000;
position:relative;
padding-top:10px;
}
div#dropMenu ul {
margin:0;
padding:0;
}
div#dropMenu li {
position:relative;
list-style:none;
margin:0;
float:left;
line-height:1em;
width:16.667%;
*width:16.649%;
}
div#dropMenu ul.level1 {
width:100%;
margin:0 auto;
text-align:center;
background:#E8F17B; /*background color of top menu when NOT selected. */
z-index:1000;
float:left;
}
div#dropMenu li a {
display: block;
/* Hides from IE5-mac \*/
height: 1%;
/* End hide from IE5-mac */
padding: .6em 0;
text-decoration: none;
text-transform:uppercase;
color:#9933CC;
text-align:center;
border-right:1px solid #9933CC;
}
div#dropMenu li:hover {}
/*div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;} */
div#dropMenu li.submenu:hover {}
div#dropMenu li a.noLine {border:none;}
div#dropMenu>ul a {width: auto; z-index:1000;}
div#dropMenu ul ul {display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #E8F17B; width:12em; z-index:1000;}
/*div#dropMenu li.submenu li.submenu {background: url(../images/submenu.gif) 95% 50% no-repeat;} */
div#dropMenu ul.level1 li.submenu:hover ul.level2,
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5,
div#dropMenu ul.level5 li.submenu:hover ul.level6,
div#dropMenu ul.level6 li.submenu:hover ul.level7,
div#dropMenu ul.level7 li.submenu:hover ul.level8 {position: absolute; width: 12em;display:block;z-index:1000;}
div#dropMenu ul.level2 {background:#E8F17B; z-index:1000; position:absolute;left:0;}
div#dropMenu ul.level3,
div#dropMenu ul.level4,
div#dropMenu ul.level5,
div#dropMenu ul.level6,
div#dropMenu ul.level7,
div#dropMenu ul.level8{top: 0; left: 12em; background:#E8F17B}
div#dropMenu ul.level2 a {padding: 0.5em 0 0.5em 0.25em;color: #9933CC; text-transform:none;} /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color: #33FFCC;}
.clearBoth {
clear:both;
height:0;
font-size:0;
line-height:0;
}


Reply With Quote
