[wolverinejoe80]

hi guys,

well, this is my 1st attempt to create a nice drop down menu. i got the source from the stu nichols dude. basically i have no idea what da hell i'm doing..

new Link


1. i had to make the main menu in PSD because of the font, Optima. is there anyway i can bring optima so i can do this in CSS? if not, i'm just gonna do this way. they really like optima.

2. submenu- i don't know how to enlarge the width of the submenu by itself. when i tried to widen it, it effects the main menu as well.

3. simple flash movie(it's a image in the rectangle area) doesn't play in firefox anymore ever since i started toying with CSS menu. works in safari.

#nav, 
#nav ul {padding:0px 30px 10px 5px; margin:0;  list-style:none; font: 11px arial, sans-serif;  background:#330000; position:relative; z-index:200;}
#nav {height:25px;  padding:5;}

#nav table {border-collapse:collapse;}
#nav li {float:left; padding:0 0px 0 0px;}
#nav li li {float:none;}
/* a hack for IE5.x and IE6 */
#nav li a li {float:left;}

#nav li a {display:block; float:left; color:#8c6239; height:25px; padding-right:2px; line-height:25px; text-decoration:none;}
#nav li li a {height:20px; line-height:20px; float:none;}

#nav li:hover {position:relative; z-index:300; background:#330000;}
#nav a:hover {position:relative; z-index:300; text-decoration:none; color:#c2b799;}

#nav :hover ul {left:0; top:22px;}
/* another hack for IE5.5 and IE6 */
#nav a:hover ul {left:-10px;}

#nav ul {position:absolute; left:-9999px; top:-9999px;}

/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover li:hover > ul {left:-15px; margin-left:100%; top:-1px;}
/* keep further levels hidden */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#nav li:hover > a {text-decoration:none; color:#c2b799;}


/* but IE5.x and IE6 need this lot to style the flyouts*/
/* show next level */
#nav a:hover a:hover ul,
#nav a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover a:hover ul
{left:100%; top:-1px;}

/* keep further levels hidden */
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}

well, please help me out!

[pgo]

Follow this, easy as pie (usually).

Son of Suckerfish Dropdowns | HTML Dog

[rustybones]

Yeah I was about to siggest the one pgo has, check it out. You can also use Superfish: Superfish - Suckerfish on 'roids

Which uses Javascript to do fade in's and the such. It's built on top of the Suckerfish method so it degrades nicely too

[LogicWeb]

I don't know if you noticed this, but you have no javascript fallback. I went to your site and the big javascript (or flash?) you have on the home page doesn't mix well with the menu since the menu is clashing with the scriptitself, getting cut off on the drop down at the bottom. I use NoScript Firefox extension to clarify.

[wolverinejoe80]

thanks guys! didn't have time to go through that link yet, but i will soon. but i got the drop down menu to work!