asked on

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

Dave Baldwin

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.

ASKER CERTIFIED SOLUTION

Designbyonyx

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

greenlayk

ASKER

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.