Date: 03/07/06 (WebDesign)    Keywords: css, html

Has anyone used the Suckerfish Dropdown menu? I'm trying to create a menu for my personal site, and the drop downs are working.. sort of.. but I can't get them to look right.

Click here for an example of the menu.


My HTML:

< ul id="navmenu" >
< li>< a href="index1.html">Home
< li>< a href="#">Icons
< ul>
< li>Music
< ul>< li>< a href="#">Amy Lee
< li>< a href="#">Ashlee Simpson
< li>< a href="#">Breaking Benjamin
< li>< a href="#">Carrie Underwood
< li>< a href="#">My Chemical Romance
< li>< a href="#">Kurt Cobain
< li>< a href="#">Disturbed
< li>< a href="#">Green Day
< li>< a href="#">Shirley Manson
< li>< a href="#">Ville Valo/HIM
< li>Movies
< ul>< li>< a href="#">Batman Begins
< li>< a href="#">Cry Baby
< li>< a href="#">D.E.B.S.
< li>< a href="#">Empire Records
< li>< a href="#">Enemy at the Gates
< li>< a href="#">Ghost
< li>< a href="#">The Labrynth
< li>< a href="#">Land of the Dead
< li>< a href="#">Moulin Rouge
< li>< a href="#">Resident Evil
< li>< a href="#">Romy and Michelle
< li>< a href="#">Return of the King
< li>< a href="#">Sin City
< li>< a href="#">Shaun of the Dead
< li>< a href="#">Team America
< li>< a href="#">Underworld
< li>< a href="#">Charlie and the Chocolate Factory
< li>< a href="#">Wrong Turn
< li>TV Shows
< ul>< li>< a href="#">Bones
< li>< a href="#">Buffy the Vampire Slayer
< li>< a href="#">Lost
< li>< a href="#">The L Word
< li>< a href="#">Supernatural
< li>Actors
< ul>< li>< a href="#">Bam Margera
< li>< a href="#">Brad Pitt
< li>< a href="#">Bruce Lee
< li>< a href="#">Eddie Izzard
< li>< a href="#">Johnny Knoxville
< li>< a href="#">James Marsters
< li>Actresses
< ul>< li>< a href="#">Amber Benson
< li>< a href="#">Angelina Jolie
< li>< a href="#">Cameron Richardson
< li>< a href="#">Jennifer Beals
< li>< a href="#">Jordanna Brewster
< li>< a href="#">Julianne Moore
< li>< a href="#">Keira Knightley
< li>< a href="#">Misc Icons
< li>< a href="#">My Personal Icons

< li>< a href="#">Wallpapers
< li>< a href="#">Graphics
< ul>< li>LiveJournal Headers
< li>Colorbars
< li>< a href="#">Resources
< li>< a href="http://www.livejournal.com/users/wikedawsum" target="_blank">LJ
--------

CSS:

#navmenu, #navmenu ul {padding: 0;
margin: 0;
list-style: none;
float: left;
line-height: 1;
background: #C2C3BC;
border: solid #8C856B;
border-width: 0px 0;
margin: 0 0 1em 0;}

#navmenu a {display: block;
width: 5em;
color: #52686F;
text-decoration: none;
padding: 0.25em 2em;
font-family: verdana, arial, helvetica;
font-size: .7em;}

#navmenu li {float: left;
width: 5em;
padding: 0;}

#navmenu li ul {position: absolute;
width: 10em;
left: -999em;
height: auto;
font-weight: normal;
border-width: 0.25em;
margin: 0;
font-family: verdana, arial, helvetica;
color: #52686F;
font-size: .7em;}

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

#navmenu li:hover ul, #navmenu li.sfhover ul {left: auto;}

#navmenu li ul ul {margin: 0 0 0 5em;
position: absolute;
width: 15em;
left: -999em;
height: auto;
font-weight: normal;
border-width: 0.25em;
font-family: verdana, arial, helvetica;
color: #52686F;
font-size: .7em;}

#navmenu, #navmenu ul {padding: 0;
margin: 0;
list-style: none;
line-height: 1;}

#navmenu li:hover ul ul, #navmenu li.sfhover ul ul {left: -999em;}

#navmenu li:hover ul, #navmenu li li:hover ul, #navmenu li.sfhover ul, #navmenu li li.sfhover ul { left: auto; }
-------


By viewing the page and the code can anyone tell me where the problem lies? I've done dropdown menus before, just not with CSS. Is there a better way to do it?

Thanks to everyone in advance. :)

Source: http://community.livejournal.com/webdesign/1076196.html