Dropdown Menu CSS

Question

I cannot figure out what is wrong with my dropdown menu. When I over over the main level link, the drop down appear but at the left of my screen instead of underneath the ma

Answer 1

It is probably jumping towards the closest relative container. So configure your list to act as relative container:

ul#menu > li {
  position: relative;
}

Also there was unnecessary float in your anchor tags, your li are already set to display as inline there is no point in float them

ul#menu a {
    display: inline-block;
    padding: 10px 16px;
    /* ... */
}

Here your fixed code