CSS doesn't let children make parent bigger - css

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;
}
change the padding - its fot padding top and bottom. (i would prepare 4px)
remove the height from the #topnavigation a - it is not necessary
remove the height from the #topnavigation li - it is also not necessary
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;
}