Welcome to WebmasterWorld Guest from 50.19.34.255

Forum Moderators: not2easy

Message Too Old, No Replies

css multi level dropdown problems

can't seem to get alignment and sub menus configured

     
12:29 pm on Aug 21, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 24, 2004
posts:127
votes: 0


Hi all,

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

1:02 pm on Aug 21, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 24, 2004
posts:127
votes: 0


Ok, I fixed the vertical alignment issue by adjusting my line-height:


#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

3:07 pm on Aug 21, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 24, 2004
posts:127
votes: 0


Got it - had to move the text-align: center from the #nav li to the #nav a and all works fine.