kflevitt
03-11-2010, 10:45 PM
I have the jQuery Multi Level CSS Menu #2 working perfectly in FF & Chrome, but not in IE7 or IE8. In either version of IE, when I hover on my top level nav the second level nav appears (as it should), but then the third level nav is visible (when it should only be visible when the item with a third level nav is hovered upon) and appears partially on top of the second level nav. It only goes away right after I have hovered over the effected items in the second level nav. When I click on another page the problem returns. I don't know what is causing it or if I need to use some sort of IE hack to get it to go away - which I don't know how to do. Please take a look at my page, code, and provide any solutions to my problem. I know there's a lot of code, but if you could please help it would be much appreciated. Thank you!
Here is the page:
http://metamediainc.com/villagepodiatry/index.php
Code taken from this demo:
http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/
Problem:
http://katielevitt.com/ie-nav-error.jpg
Screen grab of the error is attached as well as the CSS. CSS is below, too:
[CODE]
#myslidemenu { float:left; margin:3px 0 0 5px; }
.jqueryslidemenu {
width:888px; height:34px;
}
.jqueryslidemenu ul {
margin: 0; padding: 0; list-style-type: none;
}
/*Top level list items*/
.jqueryslidemenu ul li {
position: relative; display:inline; float:left; width:109px; font-size:8px;
}
/* START Top level menu image background for link and hover states */
.jqueryslidemenu ul li#locations a, .jqueryslidemenu ul li#locations a:link, .jqueryslidemenu ul li#physicians a, .jqueryslidemenu ul li#physicians a:link,
.jqueryslidemenu ul li#patient-info a, .jqueryslidemenu ul li#patient-info a:link, .jqueryslidemenu ul li#patient-info a, .jqueryslidemenu ul li#patient-info a:link,
.jqueryslidemenu ul li#medical-services a, .jqueryslidemenu ul li#medical-services a:link, .jqueryslidemenu ul li#medical-services a, .jqueryslidemenu ul li#medical-services a:link,
.jqueryslidemenu ul li#treatments a, .jqueryslidemenu ul li#treatments a:link, .jqueryslidemenu ul li#treatments a, .jqueryslidemenu ul li#treatments a:link,
.jqueryslidemenu ul li#surgery a, .jqueryslidemenu ul li#surgery a:link, .jqueryslidemenu ul li#surgery a, .jqueryslidemenu ul li#surgery a:link,
.jqueryslidemenu ul li#health-info a, .jqueryslidemenu ul li#health-info a:link, .jqueryslidemenu ul li#health-info a, .jqueryslidemenu ul li#health-info a:link,
.jqueryslidemenu ul li#contact a, .jqueryslidemenu ul li#contact a:link, .jqueryslidemenu ul li#contact a, .jqueryslidemenu ul li#contact a:link
{
float:left; margin:0px 0px 0px 0px; width:109px; height:0px; padding-top:40px; display: block; background:url(images/bottom-nav.gif) no-repeat; overflow:hidden;
}
.jqueryslidemenu ul li#locations a, .jqueryslidemenu ul li#locations a:link { background-position:0 0; }
.jqueryslidemenu ul li#locations a:hover { background-position:0 -41px; }
.jqueryslidemenu ul li#physicians a, .jqueryslidemenu ul li#physicians a:link { background-position:-109px 0; }
.jqueryslidemenu ul li#physicians a:hover { background-position:-109px -41px; }
.jqueryslidemenu ul li#patient-info a, .jqueryslidemenu ul li#patient-info a:link { background-position:-220px 0; }
.jqueryslidemenu ul li#patient-info a:hover { background-position:-220px -41px; }
.jqueryslidemenu ul li#medical-services a, .jqueryslidemenu ul li#medical-services a:link { background-position:-329px 0; }
.jqueryslidemenu ul li#medical-services a:hover { background-position:-329px -41px; }
.jqueryslidemenu ul li#treatments a, .jqueryslidemenu ul li#treatments a:link { background-position:-437px 0; }
.jqueryslidemenu ul li#treatments a:hover { background-position:-437px -41px; }
.jqueryslidemenu ul li#surgery a, .jqueryslidemenu ul li#surgery a:link { background-position:-547px 0; }
.jqueryslidemenu ul li#surgery a:hover { background-position:-547px -41px; }
.jqueryslidemenu ul li#health-info a, .jqueryslidemenu ul li#health-info a:link { background-position:-657px 0; }
.jqueryslidemenu ul li#health-info a:hover { background-position:-657px -41px; }
.jqueryslidemenu ul li#health-info a, .jqueryslidemenu ul li#health-info a:link { background-position:-657px 0; }
.jqueryslidemenu ul li#health-info a:hover { background-position:-657px -41px; }
.jqueryslidemenu ul li#contact a, .jqueryslidemenu ul li#contact a:link { background-position:-767px 0; }
.jqueryslidemenu ul li#contact a:hover { background-position:-767px -41px; }
/* END Top level menu image background for link and hover states */
* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block; z-index:-1; visibility:hidden;
}
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}
.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}
/* START First Sub level menu nav styles */
/*1st sub level menu position - for all 1st sub level menus */
.jqueryslidemenu ul li ul {
position:absolute; left: 0; display:block; visibility:hidden;
}
/*1st sub level menu position for #locations, */
.jqueryslidemenu ul li#locations ul, .jqueryslidemenu ul li#physicians ul, .jqueryslidemenu ul li#patient-info ul,
.jqueryslidemenu ul li#medical-services ul, .jqueryslidemenu ul li#treatments ul, .jqueryslidemenu ul li#surgery ul,
.jqueryslidemenu ul li#health-info ul, .jqueryslidemenu ul li#contact ul {
position:absolute; left:0px; display:block; visibility:hidden;
}
.jqueryslidemenu ul li#locations ul, .jqueryslidemenu ul li#physicians ul, .jqueryslidemenu ul li#patient-info ul,
.jqueryslidemenu ul li#medical-services ul, .jqueryslidemenu ul li#treatments ul, .jqueryslidemenu ul li#surgery ul,
.jqueryslidemenu ul li#health-info ul, .jqueryslidemenu ul li#contact ul {
display:list-item; float:none;
}
.jqueryslidemenu ul li#locations ul li a, .jqueryslidemenu ul li#locations ul li a:link,
.jqueryslidemenu ul li#physicians ul li a, .jqueryslidemenu ul li#physicians ul li a:link,
.jqueryslidemenu ul li#patient-info ul li a, .jqueryslidemenu ul li#patient-info ul li a:link,
.jqueryslidemenu ul li#medical-services ul li a, .jqueryslidemenu ul li#medical-services ul li a:link,
.jqueryslidemenu ul li#treatments ul li a, .jqueryslidemenu ul li#treatments ul li a:link,
.jqueryslidemenu ul li#surgery ul li a, .jqueryslidemenu ul li#surgery ul li a:link,
.jqueryslidemenu ul li#health-info ul li a, .jqueryslidemenu ul li#health-info ul li a:link,
.jqueryslidemenu ul li#contact ul li a, .jqueryslidemenu ul li#contact ul li a:link {
font:normal 12px Verdana; width:160px; padding: 8px 0 25px 15px; height:0px; margin:0 0 0 2px; border-bottom: 1px solid #fff;
background-color:#d2cfb8; background-image:none; text-decoration:none; color:#484531; text-shadow: 1px 1px 1px #f8f8f8;
}
.jqueryslidemenu ul li#patient-info ul li#insur-payment a, .jqueryslidemenu ul li#patient-info ul li#bill-pay a { font-size:12px; height:14px;}
.jqueryslidemenu ul li#patient-info ul li#bill-pay a { padding: 8px 0 10px 15px; }
.jqueryslidemenu ul li#locations ul li a:hover, .jqueryslidemenu ul li#physicians ul li a:hover, .jqueryslidemenu ul li#patient-info ul li a:hover,
.jqueryslidemenu ul li#medical-services ul li a:hover, .jqueryslidemenu ul li#treatments ul li a:hover, .jqueryslidemenu ul li#surgery ul li a:hover,
.jqueryslidemenu ul li#health-info ul li a:hover, .jqueryslidemenu ul li#contact ul li a:hover {
background-color:#ebe9d8; text-shadow: 2px 2px 2px #fff;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float:left;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
/*Third level flyout menus*/
.jqueryslidemenu ul li ul li ul {
position:absolute; left:0; top:0; margin-left:67px; display:block; visibility:hidden;
}
/* Sub level menu links style */
.jqueryslidemenu ul li ul li a:link {
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
background-color:#c4c4c4;
border-left:1px solid #fff;
border-right:1px solid #fff;
}
* html .jqueryslidemenu ul li ul li a { /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
visibility:hidden;
}
* html .jqueryslidemenu ul li ul li a:hover { /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
visibility:hidden;
}
[CODE]
Here is the page:
http://metamediainc.com/villagepodiatry/index.php
Code taken from this demo:
http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/
Problem:
http://katielevitt.com/ie-nav-error.jpg
Screen grab of the error is attached as well as the CSS. CSS is below, too:
[CODE]
#myslidemenu { float:left; margin:3px 0 0 5px; }
.jqueryslidemenu {
width:888px; height:34px;
}
.jqueryslidemenu ul {
margin: 0; padding: 0; list-style-type: none;
}
/*Top level list items*/
.jqueryslidemenu ul li {
position: relative; display:inline; float:left; width:109px; font-size:8px;
}
/* START Top level menu image background for link and hover states */
.jqueryslidemenu ul li#locations a, .jqueryslidemenu ul li#locations a:link, .jqueryslidemenu ul li#physicians a, .jqueryslidemenu ul li#physicians a:link,
.jqueryslidemenu ul li#patient-info a, .jqueryslidemenu ul li#patient-info a:link, .jqueryslidemenu ul li#patient-info a, .jqueryslidemenu ul li#patient-info a:link,
.jqueryslidemenu ul li#medical-services a, .jqueryslidemenu ul li#medical-services a:link, .jqueryslidemenu ul li#medical-services a, .jqueryslidemenu ul li#medical-services a:link,
.jqueryslidemenu ul li#treatments a, .jqueryslidemenu ul li#treatments a:link, .jqueryslidemenu ul li#treatments a, .jqueryslidemenu ul li#treatments a:link,
.jqueryslidemenu ul li#surgery a, .jqueryslidemenu ul li#surgery a:link, .jqueryslidemenu ul li#surgery a, .jqueryslidemenu ul li#surgery a:link,
.jqueryslidemenu ul li#health-info a, .jqueryslidemenu ul li#health-info a:link, .jqueryslidemenu ul li#health-info a, .jqueryslidemenu ul li#health-info a:link,
.jqueryslidemenu ul li#contact a, .jqueryslidemenu ul li#contact a:link, .jqueryslidemenu ul li#contact a, .jqueryslidemenu ul li#contact a:link
{
float:left; margin:0px 0px 0px 0px; width:109px; height:0px; padding-top:40px; display: block; background:url(images/bottom-nav.gif) no-repeat; overflow:hidden;
}
.jqueryslidemenu ul li#locations a, .jqueryslidemenu ul li#locations a:link { background-position:0 0; }
.jqueryslidemenu ul li#locations a:hover { background-position:0 -41px; }
.jqueryslidemenu ul li#physicians a, .jqueryslidemenu ul li#physicians a:link { background-position:-109px 0; }
.jqueryslidemenu ul li#physicians a:hover { background-position:-109px -41px; }
.jqueryslidemenu ul li#patient-info a, .jqueryslidemenu ul li#patient-info a:link { background-position:-220px 0; }
.jqueryslidemenu ul li#patient-info a:hover { background-position:-220px -41px; }
.jqueryslidemenu ul li#medical-services a, .jqueryslidemenu ul li#medical-services a:link { background-position:-329px 0; }
.jqueryslidemenu ul li#medical-services a:hover { background-position:-329px -41px; }
.jqueryslidemenu ul li#treatments a, .jqueryslidemenu ul li#treatments a:link { background-position:-437px 0; }
.jqueryslidemenu ul li#treatments a:hover { background-position:-437px -41px; }
.jqueryslidemenu ul li#surgery a, .jqueryslidemenu ul li#surgery a:link { background-position:-547px 0; }
.jqueryslidemenu ul li#surgery a:hover { background-position:-547px -41px; }
.jqueryslidemenu ul li#health-info a, .jqueryslidemenu ul li#health-info a:link { background-position:-657px 0; }
.jqueryslidemenu ul li#health-info a:hover { background-position:-657px -41px; }
.jqueryslidemenu ul li#health-info a, .jqueryslidemenu ul li#health-info a:link { background-position:-657px 0; }
.jqueryslidemenu ul li#health-info a:hover { background-position:-657px -41px; }
.jqueryslidemenu ul li#contact a, .jqueryslidemenu ul li#contact a:link { background-position:-767px 0; }
.jqueryslidemenu ul li#contact a:hover { background-position:-767px -41px; }
/* END Top level menu image background for link and hover states */
* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block; z-index:-1; visibility:hidden;
}
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}
.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}
/* START First Sub level menu nav styles */
/*1st sub level menu position - for all 1st sub level menus */
.jqueryslidemenu ul li ul {
position:absolute; left: 0; display:block; visibility:hidden;
}
/*1st sub level menu position for #locations, */
.jqueryslidemenu ul li#locations ul, .jqueryslidemenu ul li#physicians ul, .jqueryslidemenu ul li#patient-info ul,
.jqueryslidemenu ul li#medical-services ul, .jqueryslidemenu ul li#treatments ul, .jqueryslidemenu ul li#surgery ul,
.jqueryslidemenu ul li#health-info ul, .jqueryslidemenu ul li#contact ul {
position:absolute; left:0px; display:block; visibility:hidden;
}
.jqueryslidemenu ul li#locations ul, .jqueryslidemenu ul li#physicians ul, .jqueryslidemenu ul li#patient-info ul,
.jqueryslidemenu ul li#medical-services ul, .jqueryslidemenu ul li#treatments ul, .jqueryslidemenu ul li#surgery ul,
.jqueryslidemenu ul li#health-info ul, .jqueryslidemenu ul li#contact ul {
display:list-item; float:none;
}
.jqueryslidemenu ul li#locations ul li a, .jqueryslidemenu ul li#locations ul li a:link,
.jqueryslidemenu ul li#physicians ul li a, .jqueryslidemenu ul li#physicians ul li a:link,
.jqueryslidemenu ul li#patient-info ul li a, .jqueryslidemenu ul li#patient-info ul li a:link,
.jqueryslidemenu ul li#medical-services ul li a, .jqueryslidemenu ul li#medical-services ul li a:link,
.jqueryslidemenu ul li#treatments ul li a, .jqueryslidemenu ul li#treatments ul li a:link,
.jqueryslidemenu ul li#surgery ul li a, .jqueryslidemenu ul li#surgery ul li a:link,
.jqueryslidemenu ul li#health-info ul li a, .jqueryslidemenu ul li#health-info ul li a:link,
.jqueryslidemenu ul li#contact ul li a, .jqueryslidemenu ul li#contact ul li a:link {
font:normal 12px Verdana; width:160px; padding: 8px 0 25px 15px; height:0px; margin:0 0 0 2px; border-bottom: 1px solid #fff;
background-color:#d2cfb8; background-image:none; text-decoration:none; color:#484531; text-shadow: 1px 1px 1px #f8f8f8;
}
.jqueryslidemenu ul li#patient-info ul li#insur-payment a, .jqueryslidemenu ul li#patient-info ul li#bill-pay a { font-size:12px; height:14px;}
.jqueryslidemenu ul li#patient-info ul li#bill-pay a { padding: 8px 0 10px 15px; }
.jqueryslidemenu ul li#locations ul li a:hover, .jqueryslidemenu ul li#physicians ul li a:hover, .jqueryslidemenu ul li#patient-info ul li a:hover,
.jqueryslidemenu ul li#medical-services ul li a:hover, .jqueryslidemenu ul li#treatments ul li a:hover, .jqueryslidemenu ul li#surgery ul li a:hover,
.jqueryslidemenu ul li#health-info ul li a:hover, .jqueryslidemenu ul li#contact ul li a:hover {
background-color:#ebe9d8; text-shadow: 2px 2px 2px #fff;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float:left;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
/*Third level flyout menus*/
.jqueryslidemenu ul li ul li ul {
position:absolute; left:0; top:0; margin-left:67px; display:block; visibility:hidden;
}
/* Sub level menu links style */
.jqueryslidemenu ul li ul li a:link {
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
background-color:#c4c4c4;
border-left:1px solid #fff;
border-right:1px solid #fff;
}
* html .jqueryslidemenu ul li ul li a { /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
visibility:hidden;
}
* html .jqueryslidemenu ul li ul li a:hover { /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
visibility:hidden;
}
[CODE]