CSS doesn't let children make parent bigger

Question

Take a look at this site I'm working on: http://appload.nu/flygklubb The first menu-item has children. But, as you can see, the children make the parent bigger. How can I prevent the parent from getting bigger and at the same time make all of the children the same size?

Answer 1

Position the child UL's absolute.

Change your CSS for:

#topnavigation > ul > li ul { visibility: hidden; }

To

#topnavigation > ul > li ul { visibility: hidden; position: absolute; }

Answer 2

Same width as parent

To keep the submenu the same width as the menu, but avoid stretching the menu:

#topnavigation ul li {
 position:relative;
}
#topnavigation ul li ul {
 position:absolute;
 z-index:1;
}
#topnavigation ul li ul li {
 height:auto;
 min-height:15px;
}
#topnavigation ul li ul li a {
 height:auto;
 min-height:15px;
}

-OR- Same width as eachother

#topnavigation ul li ul {
 position:absolute;
 z-index:1;
}

Note: I also recommend adding a background color (or less busy image) to the submenu items for better readability.

Answer 3

The Elment gots bigger because of the padding on the

#topnavigation a {
  padding: 10px 11px;
}

1. change the padding - its fot padding top and bottom. (i would prepare 4px)
2. remove the height from the #topnavigation a - it is not necessary
3. remove the height from the #topnavigation li - it is also not necessary
4. change the height of the div (#topnavigation). (i would prepare 26px)

Your new CSS:

#topnavigation li {
display: list-item;
}

#topnavigation a {
    display: block;
    padding: 4px 11px;
}

#topnavigation {
    background-color: #ADA287;
    border-radius: 5px 5px 5px 5px;
    height: 26px;
    position: relative;
    top: 20px;
    width: 970px;
}