CSS dropdown menu not working with position:relative? - html

Question

I want to build a simple CSS dropdown menu. It works if I use absolute positioning, but starts to push down the content if I use relative positioning. What is the reason for this? Using absolute positioning for the DIVs menu and content is not an option for me unfortunately.
HTML:
<div id="menu">
<ul>
<li class="topmenu">
Top 1
<ul>
<li class="submenu">Sub 1</li>
<li class="submenu">Sub 2</li>
</ul>
</li>
</ul>
</div>
<div id="content">
Test
</div>
CSS:
#menu {
position:relative;
}
#menu ul {
list-style-type:none;
list-style-image:none;
margin:0px;
padding:0px;
}
#menu li.topmenu {
float:left;
}
.topmenu a {
float:left;
width:110px;
}
.topmenu ul{
display:none;
}
.submenu a{
width:110px;
clear:both;
}
.topmenu:hover ul {
display:block;
z-index:10;
}
#content {
display: block;
clear: both;
z-index: 1;
}

Answer 1

I've simplified the code, removed the horrible floats and substituted with display: inline-block and fixed the positioning issue.
(Demo)
#menu ul {
list-style:none;
margin:0px;
padding:0px;
font-size: 0px;
}
#menu li {
font-size: 1rem;
}
#menu > ul > li {
display: inline-block;
}
#menu ul ul {
display: none;
}
#menu ul li:hover ul {
display: block;
position: absolute;
}
#menu a {
display: inline-block;
width:110px;
}