Cannot get dropdown menu working properly.

[lorne17]

Hello there,

 

I have looked at several articles, but can't find a solution.  I am trying to add submenu items to my already existing menu and can't seem to get the CSS coding right.

 

Can someone help point me in the right direction please?

 

My site is here: www.slarc.com (hover over Firm Profile and you'll see Case Studies and News show up to the right.  I want those to drop below just like a standard dropdown).

 

This is my NavMenu CSS:

/***    #NavMenu div for all pages.             ***/
#NavMenu h2             { clear:both; padding-top:20px; }
#NavMenu  	            { margin:0; padding:0; }
#NavMenu li ul			{ display:none; }
#NavMenu li:hover ul	{ display:block; }
#NavMenu li             { float:left; list-style:none; font-family:"Arial Narrow", Arial, sans-serif; font-size:15px; height:24px; text-align:center; overflow:hidden; border-left:solid #CCC 1px; text-transform:uppercase; margin:0; padding:0; }
#NavMenu li a           { display:block; width:auto; color:#343C38; text-decoration:none; }
#NavMenu li a:hover,#NavMenu li a:focus,#NavMenu li a:active { color:#343C38; }
#NavMenu a              { background:url(Images/NavMenu/gradients.gif) no-repeat -127px 0; float:left; }
#NavMenu li li			{ position:relative; margin:0; padding:0; }
#NavMenu li,#NavMenu span,#NavMenu a { position:relative; padding-top:3px; }
#NavMenu span           { display:block; float:left; height:24px; background:url(Images/NavMenu/gradients.gif) no-repeat; }
#NavMenu .one           { border-left:0; }
#NavMenu .one a         { width:90px; }
#NavMenu .one span      { background-position:0 0; background-color:#B27253; }
#NavMenu .two a         { width:125px; }
#NavMenu .two span      { background-position:0 -24px; background-color:#325041; }
#NavMenu .three a       { width:100px; }
#NavMenu .three span    { background-position:0 -48px; background-color:#DDC067; }
#NavMenu .four a,#NavMenu .six a    { width:115px; }
#NavMenu .four span     { background-position:0 -72px; background-color:#B27253; }
#NavMenu .five a        { width:150px; }
#NavMenu .five span     { background-position:0 -96px; background-color:#63719f; }
#NavMenu .six span      { background-position:0 -120px; background-color:#325041; }

 

Any suggestions?

 

Thanks,

Lorne

[smerny]

i'd start by adding "position: absolute" to #NavMenu li ul

[lorne17]

Hello smerny,

 

Good catch.  I went ahead and added position: absolute; to the #NavMenu li ul.  But then when I add the top pixels, they disappear as if they are outside the boundaries of the topmenu.  I have a height restriction of 24px to the #NavMenu li, but when I change that the sliding background is all messed up.

 

Do you know why this is?

 

Thanks in advance,

Lorne

[smerny]

it's happening because of the overflow: hidden in #navMenu li

[lorne17]

Well ok so that worked but now it messes up my backgrounds and sliding effect.  Why is it doing this?

 

Thanks,

Lorne

[smerny]

dont remember what the background or sliding effects were on it. i added the overflow:hidden to the li (in dev tool) and don't see anything different except the drop menus are getting cut out so i'm assuming you're modifying other stuff right now too.

 

but i'm not a css genius by any means, i just pointed out the more obvious things that were causing your main issues.

[lorne17]

Yea sorry Smerny, I've been playing with it all morning.  I removed the sliding backgrounds script.  Now I'm playing with all the hover states to get it to look the way I want.

 

Thanks,

Lorne