Hey there, I have been piecing this menu system together from a couple
of different sources and can almost see the end the of the tunnel.
This is based on the Suckerfish Dropdowns which then incorporates an
iframe to allow the menu to be over the form. (See links)
http://www.htmldog.com/articles/suckerfish/dropdowns/
http://homepage.mac.com/igstudio/des...ls-iframe.html
These are the issues that I am having -
1. my top menu (Percoidei, Anabantoidei) has the rollover change the
background from white to maroon, I cannot get the text to change from
black to white on the rollover
2. I have a fixed width for the drop down menus, I would like to have
this expand to be just the width (plus some padding) of the longest
text.
below is the code for my page -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Untitl ed Document</title>
<style type="text/css">
body {
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
/** Nav Dropdowns **/
#nav{
padding: 0 0 0 10px;
margin: 0;
list-style: none;
float: left;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #294D84;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999999;
}
#nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float: left;
width: 110px;
}
#nav li { /* main list items */
float: left;
padding: 0 9px 0 8px;
}
#nav li a{ /* main list items */
text-decoration: none;
color:#000000;
display: block;
padding: 3px 7px 4px 7px;
}
#nav li a:hover, li.iehover a { /* main list items */
text-decoration: none;
color:#FFFFFF;
background-color: #9C2021;
display: block;
padding: 3px 7px 4px 7px;
}
#nav ul li { /* sunmenu list items */
position: relative;
float: left;
width: 139px;
padding: 0;
}
#nav li ul { /* second-level lists */
position: absolute;
left: -1000px;
margin-left: 0px;
margin-top: 0px;
}
#nav li ul ul { /* third-and-above-level lists */
left: -1000px;
}
#nav ul li a {
display: block;
text-decoration: none;
padding: 5px 7px 6px 7px;
background-color:#CCCCCC;
}
#nav ul li a:hover {
background-color: #9C2021;
padding: 5px 7px 6px 7px;
color: #FFFFFF;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul,
#nav li.iehover ul ul, #nav li.iehover ul ul ul, #nav li.iehover ul ul
ul ul {
left: -1000px;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li
li li li:hover ul, #nav li.iehover ul, #nav li li.iehover ul, #nav li
li li.iehover ul, #nav li li li li.iehover ul { /* lists nested under
hovered list items */
left: auto;
background-color:#CCCCCC;
width: 139px;
border-style: solid;
border-color: #999999;
border-width: 1px;
}
/** Support for the "nav_menu.j s" **/
#nav iframe {
position: absolute;
left: 0;
top: 0;
z-index: 0;
filter: progid:DXImageT ransform.Micros oft.Alpha(style =0,opacity=0);
margin-left: -1px;
}
/** end **/
</style>
<script type="text/javascript">
ieHover = function() {
var ieLIs = document.getEle mentById('nav') .getElementsByT agName('li');
for (var i=0; i<ieLIs.length ; i++) if (ieLIs[i]) {
ieLIs[i].onmouseover=fu nction() {
var ieUL = this.getElement sByTagName('ul' )[0];
if (ieUL) {
var ieMat = document.create Element('iframe ');
ieMat.style.wid th=ieUL.offsetW idth + 2 + "px";
ieMat.style.hei ght=ieUL.offset Height + 2 + "px";
ieUL.insertBefo re(ieMat,ieUL.f irstChild);
ieUL.style.zInd ex="99";
}
this.className+ =" iehover";
}
ieLIs[i].onmouseout=fun ction() {
this.className= this.className. replace(' iehover', '');
}
}
}
if (window.attachE vent) window.attachEv ent('onload', ieHover);
</script>
</head>
<body>
<ul id="nav">
<li><a href="#">Percoi dei</a>
<ul>
<li><a href="#">Remora s</a></li>
<li><a href="#">Tilefi shes</a></li>
<li><a href="#">Bluefi shes</a></li>
<li><a href="#">Tigerf ishes</a></li>
</ul>
</li>
<li><a href="#">Anaban toidei</a>
<ul>
<li><a href="#">Climbi ng perches</a></li>
<li><a href="#">Labyri nthfishes</a></li>
<li><a href="#">Kissin g gouramis</a></li>
<li><a href="#">Pike-heads</a></li>
<li><a href="#">Giant gouramis</a></li>
</ul>
</li>
</ul>
<br />
<br />
<br />
<br />
<p></p>
<form>
<select>
<option>This is a <select&g t; form element...</option>
<option>Norma l browsers would have no problem rendering it within
document stacking order...</option>
<option>IE, however, would display it through any other HTML
element, positioned over it.</option>
</select>
</form>
<p></p>
</body>
</html>
Your help is greatly appreciated.
Dan
