How to create cross-browser css drop down menus

I've created a css-based drop down menu using the Suckerfish solution that works in IE and Firefox but doesn't show in webkit browsers (Safari & Chrome).

 <div id="mainNav">
  <ul id="nav" class="nav">
    <li class="home"><a href="default.shtml">Home</a></li>
    
    <li class="chindo"><a href="dago&chindo/default.shtml">Dago & Chindo's</a></li>
    <li class="jose"><a href="jose&patricia/default.shtml">Jose & Patricia's</a></li>
    <li class="cork"><a href="starboardCork/default.shtml">The 'Cork'</a></li>		
    <li ><a href="#">Past Projects</a>
      <ul>
        <li class="juanLuis"><a href="archives/juanLuis&amp;ana/default.shtml">Juan Luis & Ana's</a></li>
        <li class="dona"><a href="archives/donaMaria/default.shtml">Dona Maria's</a></li>
        <li class="juana"><a href="archives/juana&amp;moncho/default.shtml">Juana & Moncho's</a></li>
        <li class="couples"><a href="archives/couplesCabin/default.shtml">Couples Cabin</a></li>
      </ul>
    </li>
    <li><a href="about/default.shtml">about</a></li>
  </ul>

Open in new window


ul.nav li {
	float: left;
	width: 8em;
}
/* To hide the actual drop-downs until they are activated, set their position to absolute
    then hide them off the left-hand side of the screen*/
ul.nav li>ul {
	position: absolute;
	width: 8em;
	left: -999em;
	margin-left: -1px;
}
/* This is where the magic happens by adding a hover pseudo-selector to the parent list
    item, make the drop-down list reappear by changing its location back to its regular
	position */
.nav li:hover ul {
	left: auto;
}

Open in new window

greenlaykAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
The original Suckerfish example http://www.htmldog.com/articles/suckerfish/example/ does work in all browsers.  Your CSS looks a little short.  You might want to take a look at the original code.

Also '&' is not a 'legal' character in a URL on the web.  If you Really need to use it in the directory names, it needs to be URLencoded which brings up other problems.
DesignbyonyxCommented:
Without spending much time at all looking at your CSS, you will need to position your list items.  This gives the nested ULs a point of reference for positioning itself.  If that doesn't make sense, try some tutorials on css positioning.

ul.nav li {
        float: left;
        width: 8em;
        position: relative;
}

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
greenlaykAuthor Commented:
Actually I needed to remove a whole lot of cruft and alter a .js file that had tag names conflicting with my css. Thanks for reminding me to live up to my coding standards.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.