CSS Dropdown Issues

Question

Hey,

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.

Answer 1

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.

Answer 2

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

Answer 3

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 }