Suckerfish Drop-down Menus Problem

[Just1nCase]

Hello,

This is my first time creating a pure CSS website and I am having trouble implementing a "Suckerfish" Drop-down menu from alistapart.com (http://www.alistapart.com/articles/dropdowns/). When viewing the site in IE, the Drop down menus is showed on the right while in Firefox/Safari, the Drop down menus are all over the place.

/* ----- NAVIGATION ----- */
#navWrapper {
height: 30px;
color: #6C6C6C;
border-top: 1px solid #cecece;
border-bottom: 1px solid #cecece;
background: url(images/mainNavBg.gif) repeat-x;
}

#mainNav {
font-size: 1.1em;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
}

ul#mainNav {
padding: 0;
list-style: none;
width: 900px;
float: left;
position: relative;
margin-left: -450px;
left: 50%;
}

ul#mainNav li {
float: left;
position: relative;}

ul#mainNav li a {
display: block;
float: left;
padding: 0 1.4em;
line-height: 2.1em;
text-decoration: none;
background: url(images/divider.gif) repeat-y left top;
color: #666666;

}

ul#mainNav li.last a {
border-right: 1px solid #a7a7a7;
}

ul#mainNav li a:hover {
color: #fff;
background: url(images/mainNavHover.gif) repeat-x;
}

ul#mainNav ul li {
list-style: none;
padding: 0;
margin: 0;
}

li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}

li > ul {
top: auto;
left: auto;
}

li:hover ul {
display: block;
}

The problem can be seen at http://www.jarvandsher.com/site/. Please let me know what I am doing wrong. All I want is to create a simple down menu for the my menu bar like www.adobe.com . Thanks.

[Dan Schulz]

http://www.htmldog.com/articles/suckerfish/dropdowns/

Yeah, they updated the menu but failed to publish it to ALA.

By the way, welcome to SitePoint!

[Just1nCase]

Thanks, I'll give it a try and let you know how it works out.

Also, thanks for the welcome. Hope to learn a lot from this forums.

[Just1nCase]

I was able to get the drop-down menus working, but I can't rollover it and the content is overlapping the drop-down menu. I believe I need to "clear" content, but I'm not sure which CSS code I need to clear.

Here is a snapshot of the bug:


Here is the link to the HTML/CSS: www.jarvandsher.com/site

/* ----- NAVIGATION ----- */

#navWrapper {
height: 30px;
color: #6C6C6C;
border-top: 1px solid #cecece;
border-bottom: 1px solid #cecece;
background: url(images/mainNavBg.gif) repeat-x;
}

#mainNav {
font-size: 1.1em;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
}

#mainNav, #mainNav ul {
margin: 0;
padding: 0;
list-style: none;
}

#mainNav a {
display: block;
}

ul#mainNav {
width: 900px;
float: left;
position: relative;
margin-left: -450px;
left: 50%;
}

#mainNav li {
float: left;
}

ul#mainNav li a {
padding: 0 1.4em;
line-height: 2.1em;
background: url(images/divider.gif) repeat-y left top;
color: #666666;
}

#mainNav li ul li a {
display:block;
width: 8.2em;
font-size: .9em;
line-height: 2.1em;
background: none;
font-weight: normal;
text-transform: none;
}

#mainNav li ul li a:hover {
text-decoration: none;
color: #4D7FC1;
background: #E7E7E7;
}

#mainNav li ul {
position: absolute;
background: #F7F7F7;
border: 1px solid #CECECE;
width: 10em;
left: -999em;
}

#mainNav li:hover ul {
left: auto;
}

Please let me know whenever you get the chance. Thanks, I appreciate your help.