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.