Forum Moderators: not2easy
I'm having a killer time trying to set up multi-level dropdowns using the popular 'Son of Suckerfish' technique. For starters, I can't seem to align the initial links (ie: home, about us, etc..) vertically centered in the horizontal navigation area I'm working with - they stick to the top of the 35px high navigation container. Also, the second level dropdowns are pushed to far to the right of the first level dropdowns, making it impossible to get the cursor onto them before the menu resets to default again. Here's the relevant code:
JAVASCRIPT:
//navigation controller
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
CSS:
#navigation { /* main container */
height: 35px;
width: 758px;
background: #CCCC99; }
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1; }
#nav a {
height: 35px;
display: block;
width: 10em; }
#nav li { /* all list items */
float: left;
width: 10em; /*width needed or else Opera goes nuts */
text-align: center;}
#nav li ul { /* second-level lists */
position: absolute;
background: #CCCC99;
width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ }
#nav li ul ul { /* third-and-above-level lists */
margin: -1em 0 0 10em; }
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */left: auto; }
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<th scope="col" id="navigation">
<ul id="nav">
<li><a href="#">Item 1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">Item 2.1</a></li>
<li><a href="#">Item 2.2</a></li>
<li><a href="#">Item 2.3</a>
<ul>
<li><a href="#">Item 2.3.1</a></li>
<li><a href="#">Item 2.3.2</a></li>
<li><a href="#">Item 2.3.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
</ul></th>
Thanks in advance for any help!
gen
#nav a {
display: block;
line-height: 35px;
width: 10em; }
...in the css. Still having issues with the sub-sub menu being too far off to the right in IE. Any help would be appreciated.
gen
