this works well in chrome and firefox, but in IE I am having issues with the drop menus on the main horizontal menu and the sub menu.
on the main menu the drop down goes behind the image below
and
on the submenu when i hover the whole sub menu goes black and when i hover over something that is supposed to drop down nothing is there. Im thinking its like the top part and is hidden behind the image.
http://www.theufhl.com
here is the .css
/*my menu*/
ul,ol,li{
margin:0;padding:0;
}
ol,ul{
list-style:none;
}
#tsnNav{
font-family:Arial,Helvetica,sans-serif;
background-image:url(http://images.tsn.ca/images/silver/common/bgs/tsn_nav_mainsub_bg.gif);
background-repeat:repeat-x;
background-position:bottom;
background-color:#000;
height:46px;padding-left:10px;
line-height:14px;
font-weight:bold;
overflow:hidden; [COLOR="Red"]when i remove this i can get the drop menus to appear on top on the image, but in the sub menu what ever i hover over brings up all drop menus[/COLOR]
font-size:11px;
}
#tsnNav ul{
display:inline;
float:left;
z-index:3;
margin-right:13px;
margin-top:4px;
padding-bottom:5px;
}
#tsnNav ul li{
display:inline;
margin:0;
padding-bottom:5px;
}
#tsnNav ul li a{
color:#fff;
text-decoration:none;
font-weight:bold;
}
#tsnNav ul li a:hover,#tsnNav ul.subNav li a:hover,#tsnNav ul li ul.tsnNavHover li a{color:#ccc;}
#tsnNav ul li.tsnNavOn{background-image:url(http://images.tsn.ca/images/silver/common/icons/nav_arrow.gif);
background-repeat:no-repeat;
background-position:center 13px;
}
#tsnNav ul li ul.tsnNavHover{
position:absolute;
display:none;
padding-right:20px;
padding-left:20px;
margin-left:-25px;
padding-top:6px;
background-image:url(http://images.tsn.ca/images/silver/common/icons/px.gif);
margin-top:13px;
}
#tsnNav ul li ul.tsnNavHover li{
background-color:#000;
display:block;
padding-left:10px;
padding-right:2px;
border-bottom:1px solid #333;
padding-bottom:0;width:94px;
}
#tsnNav ul.subNav li ul li ul.tsnNavHover{
margin-top:13px;
}
#tsnNav ul.subNav li ul li ul.tsnNavHover li ul.tsnNavHover{
margin: 0px;
margin-top:-0.5em;
-moz-margin-left:6.8em;
margin-left:4.5em;
}
#tsnNav ul.subNav li ul li ul.navTwo{
margin-left:80px;
}
#tsnNav ul.subNav li ul li ul.navTwo li{
border-left:1px solid #838383;
}
#tsnNav ul.subNav li ul li ul.tsnNavHover li{
background-color:#5e6467;
border-bottom:1px solid #838383;
}
#tsnNav ul.subNav li ul li ul.tsnNavHover li a{color:#ccc;}
#tsnNav ul.subNav li ul li ul.tsnNavHover li a:hover{color:#fff;}
#tsnNav ul li ul.tsnNavHover li a:hover{color:#666;}
#tsnNav ul.subNav{
padding:0;
margin:0;
z-index:100;
padding-top: 4px;
-moz-width: 99%;
width: 100%;
padding-left: 10px;
}
#tsnNav ul.subNav li ul{margin-right:0;margin-top:0;}
#tsnNav ul.subNav li a{margin-right:14px;}
#tsnNav ul li:hover ul.tsnNavHover,#tsnNav ul.subNav li ul li:hover ul.tsnNavHover{display:block;}
#tsnNav ul.subNav li:hover ul.tsnNavHover{display:none;}
#tsnNav ul li.ieHover ul.tsnNavHover{left:auto;display:block;}
/*my menu*/
