Something new, but still not working, any help on this?
I'm trying to use Tanny O'Haley's solution (http://tanny.ica.com/ica/tko/tkoblog.nsf/dx/select-tag-overlap-in-ie-part-iii), but I think it's the javascirpt thats not working with my HTML and CSS.
It displays once when I refresh the page and leaves an outline of where the menu was (Kinda), but after that it displays behind the select menu on the page.
Example Navigation based from STU's nav (http://www.cssplay.co.uk/menus/simple_vertical.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<div class="cssnav">
<ul class="nav" id="nav">
<li>
<a href="#" target="_top">Menu 1
<!--[if IE 7]><!--></a>
<!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="drop">
<li>
<a href="#" target="_top">Link 1</a>
</li>
<li>
<a href="#" target="_top">Link 2</a>
</li>
<li>
<a href="#" target="_top">Link 3</a>
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<a href="#NO_HREF" class="no_href_cursor">Menu 2
<!--[if IE 7]><!--></a>
<!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="drop">
<li>
<a href="#NO_HREF" class="no_href_cursor">Sub-Menu 1
<!--[if IE 7]><!--></a>
<!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="drop">
<li>
<a href="#" target="_top">Link 1</a>
</li>
<li>
<a href="#" target="_top">Link 2</a>
</li>
<li>
<a href="#" target="_top">Link 3</a>
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<a href="#NO_HREF" class="no_href_cursor">Sub-Menu 2
<!--[if IE 7]><!--></a>
<!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="drop">
<li>
<a href="#" target="_top">Link 1</a>
</li>
<li>
<a href="#" target="_top">Link 2</a>
</li>
<li>
<a href="#" target="_top">Link 3</a>
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>
The CSS
/* Cursor for no href links */
.no_href_cursor {
cursor: text;
}
/* Overarching Menu
-----------------------------------*/
.cssnav {
position:relative;
z-index:9999;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-align:center;
height: 25px;
overflow: visable;
width: 100%;
background:#467aa7;
border: 1px solid #fff;
}
.cssnav ul {
padding:0;
margin:0;
list-style-type:none;
}
.cssnav ul ul {
width:150px;
text-align:left;
}
/* Main list
-----------------------------------*/
.cssnav li {
float:left;
width:150px; /* This controls the width of the topnav was 106 or 150 */
position:relative;
_top: 1px; /* IE6 will read this only */
background:none; /* Added to override style */
padding:0px; /* Added to override style */
}
/* First Level
-----------------------------------*/
/* Links */
.cssnav a, .cssnav a:visited {
display:block;
text-decoration:none;
color:#fefefe;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff;
background:#467aa7;
line-height:25px;
}
/* Added to fix div span for IE6 */
.cssnav li li a {
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
_top: 0px; /* IE6 will read this only */
text-decoration:none;
}
/* Links on hover */
.cssnav a:hover, .cssnav ul ul a:hover{
color:#fff;
background:#80b0da;
text-decoration:none;
}
.cssnav :hover > a, .cssnav ul ul :hover > a {
color:#fff;
background:#80b0da;
text-decoration:none;
}
/* Second Level
-----------------------------------*/
/* Links */
.cssnav ul ul a, .cssnav ul ul a:visited {
background:#578bb8;
line-height:1em;
padding:5px 10px;
width:128px;
border-width: 0px 2px 1px 0px;
text-decoration:none;
}
/* Links on hover */
.cssnav ul ul a:hover {
background:#80b0da;
text-decoration:none;
}
/* Visibility */
.cssnav ul li:hover ul, .cssnav ul a:hover ul{
visibility:visible;
text-decoration:none;
}
/* Third Level
-----------------------------------*/
/* Links */
.cssnav ul ul ul a, .cssnav ul ul ul a:visited {
background:#578bb8;
text-decoration:none;
}
/* Links on hover */
.cssnav ul ul ul a:hover {
background:#80b0da;
text-decoration:none;
}
/* Positioning */
.cssnav ul ul ul{
left:149px;
*left:148px; /* IE Only */
top:-1px;
*border: 1px solid #fff; /* IE Only */
}
.cssnav ul ul ul.left {
left:-149px;
*left:-148px; /* IE Only */
}
/* Visibility */
.cssnav ul :hover ul ul{
visibility:hidden;
}
.cssnav ul :hover ul :hover ul{
visibility:visible;
}
/* Fourth Level
-----------------------------------*/
/* Links */
.cssnav ul ul ul ul a, .cssnav ul ul ul ul a:visited {
background:#578bb8;
text-decoration:none;
}
/* Links on hover */
.cssnav ul ul ul ul a:hover {
background:#80b0da;
text-decoration:none;
}
/* Positioning */
.cssnav ul ul ul ul{
left:149px;
*left:148px; /* IE Only */
top:-1px;
*border: 1px solid #fff; /* IE Only */
}
.cssnav ul ul ul ul.left {
left:-149px;
*left:-148px; /* IE Only */
}
/* Visibility */
.cssnav ul :hover ul :hover ul ul {
visibility:hidden;
}
.cssnav ul :hover ul :hover ul :hover ul{
visibility:visible;
}
/* Fifth Level
-----------------------------------*/
/* Links */
.cssnav ul ul ul ul ul a, .cssnav ul ul ul ul ul a:visited {
background:#578bb8;
text-decoration:none;
}
/* Links on hover */
.cssnav ul ul ul ul ul a:hover {
background:#80b0da;
text-decoration:none;
}
/* Positioning */
.cssnav ul ul ul ul ul{
left:149px;
*left:148px; /* IE Only */
top:-1px;
*border: 1px solid #fff; /* IE Only */
}
.cssnav ul ul ul ul ul.left {
left:-149px;
*left:-148px; /* IE Only */
}
/* Visibility */
.cssnav ul :hover ul :hover ul :hover ul ul {
visibility:hidden;
}
.cssnav ul :hover ul :hover ul :hover ul :hover ul{
visibility:visible;
}
/* All Sub Levels
-----------------------------------*/
/* Default visibility */
.cssnav ul ul {
visibility:hidden;
position:absolute;
top:26px;
left:0;
border-top:1px solid #fff;
}
/* IE Table
-----------------------------------*/
.cssnav table {
position:absolute;
top:0;
left:0;
border-collapse:collapse;
}
/* Support for the "iehover-fix.js" */
* html ul#nav iframe, * html ul.nav iframe {
position: absolute;
/* account for the border */
left: -0.25em;
top: -0.25em;
z-index: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}
/* this is for IE 5.0
select.hide { visibility: hidden; }
/* End Support for the "iehover-fix.js" */
Link to the JavaScript file (http://tanny.ica.com/ICA/TKO/test.nsf/js/iehover-fix.js)