CSS Dropdown Issues

I am a .NET / Java guy and have to do some website stuff. Complete beginner with CSS etc. I've been working with a template and had to convert the menu to a drop down and have been having loads of difficulty.

I've uploaded the current iteration and it can be found here开发者_运维百科 with the barebones menu and css pages:

http://www.nitricburnstudios.com/tmp/cssproblems/features.html

The menu items are overlapping with one another.

Thanks for any help! SUPER appreciated.

I'm not sure if this is possible for your project, but there are lots of canned solutions to this that should prevent you from reinventing the wheel.

Well, it depends on 1) if you just want to get something working, or 2) you insist oin doing it yourself and understanding it.

if 1) I swear by http://wonderwebware.com/css-menu/ a CSS menu generator (you don't need to use it, just study it's output)

if 2) the fist thing you need to do is to lean about the W3C's validation services. I ran your dropdown.css through the CSS validator and it had 1 error, which might be causing your problem "Property behavior doesn't exist : url(csshover.htc) url(csshover.htc)"

Styles.css had 11 warnings "Same colors for color and background-color in two contexts", which might explain why I couldn't see any text on the menus :-)

The good news is that the HTML validator says that your HTML is ok.

If you want to study CSS, I can recommend some great sites

Here's a very simple vertical example that may get you started:

HTML

  <div id='dropper'>
    <div>Foo</div>
    <div>Bar</div>
    <div>Bas</div>
    <div>Snork</div>
  </div>

CSS

#dropper { overflow: hidden; height:25px; line-height:25px }
#dropper:hover { height:100px }