Making a "drop line" navigation work

[SusanN]

Hello,

I'm working on a redesign of my site and would like to make a "drop line" navigation work within the cms. 

First, here's a sample of what the menu should do.  When you hover over Services or Getting Started, you'll see the sub pages appear on the line below.  This is powered purely by CSS and no javascript. 

Okay, here's the menu using the cms to power it.  I don't have the sub pages showing in the menu right now, but if I did, the sub pages would show in the line below.  They aren't hidden like they're supposed to be. 

Can someone give me an idea of how to solve this?  And if you need to see an example of what's happening, let me know and I'll set up another test page.

Thanks.

[Dr.CSS]

Need to see the sub navs...

I've done this before but all the subs were to the left...

OH yea and the one you said works, not in IE6, no JS...

[SusanN]

Oh goodness, I forgot to check IE 6.  Hate that browser.  lol

Okay, check this.  I don't know why there's extra padding on the current tab...need to figure that out.

So, you think I need js to do this?

[Dr.CSS]

I hate IE in any form as that is 999999.9999% of the reasons for infections...

OK you have the ul IDed as menu so in your CSS you are moving too far down the li on the display:none/display:block...

#menu ul li ul {
position: absolute;
display: none;
width: 700px;
}
#menu ul li:hover ul, #menu ul li a:hover ul, #menu li.sfhover ul {
display: block;
}

Could/should be, you would need to change some of the ones after the first one if you want more than 2 levels, but I don't think this design should do that  ...

#menu ul {
position: absolute;
display: none;
width: 700px;
}
#menu li:hover ul, #menu ul li a:hover ul, #menu li.sfhover ul {
display: block;
}

And if you look at the other calls they actually expect you to use JS to target IE6...

li.sfhover  So where ever you got this template you need to see if they have it or look into changing the one that comes with CMSMS or change your links in the CSS to look more like the ones CMSMS IE JS uses, it adds menuh or h to the end of them...

From default Navigation: CSSMenu - Horizontal

#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
  background-color: #E7AB0B;
}

/*
just add
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul ul ul,
for fourth level
*/
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
  display: none;
}

/* add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
for fourth level
*/
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
  display: block;
}

[SusanN]

Thanks so much for your help!  I'm almost there (thanks to you and a friend of mine)!