Proper submenu using only HTML+CSS - html

Question

I'm trying to write a simple HTML+CSS menu without any absolute positioning or JS. My problem is regarding submenus, where it either expand the current selected item or displace it:
The HTML is straightforward:
<ul id="menu">
<li>Item 1</li>
<li>Folder 1
<ul>
<li>Item 2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
And so is the CSS:
#menu, #menu ul {
border-style: solid;
border-width: 0px;
border-top-width: 1px;
float: left;
list-style: none;
margin: 0px;
padding: 0px;
width: 180px;
}
#menu li ul {
background-color: cyan;
display: none;
position: relative;
right: -168px;
width: auto;
}
#menu li:hover ul {
display: block;
}
#menu li {
border-style: solid;
border-width: 1px;
border-top-width: 0px;
padding: 10px;
}
#menu li:hover {
background-color: lightgrey;
font-weight: bold;
}
I thought the submenu could only affect the layout after being repositioned, which seems
to not be the case here. I'm a bit at a loss.

Answer 1

Using this type of menu pattern, you should use position:relative on the parent LI of the sub-menu, and position:absolute on the UL child menu. The allows the child element to appear outside of the layout flow, relative to its parent.
It's also good practice to put all non-position styling on the A-tag inside each LI and use display:block. It would be difficult for you to style the text on "Folder 1" without it.
Simple example: http://jsfiddle.net/Diodeus/jejNy/127/

Answer 2

Use position:absolute on the ul and position:relative on the LI:
HTML:
<ul id="menu">
<li>Item 1</li>
<li>Folder 1
<ul>
<li>Item 2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
CSS:
#menu, #menu ul {
border-style: solid;
border-width: 0px;
border-top-width: 1px;
float: left;
list-style: none;
margin: 0px;
padding: 0px;
width: 180px;
}
#menu li ul {
background-color: cyan;
display: none;
position: absolute;
top:-1px;
left: 178px;
}
#menu li:hover ul {
display: block;
}
#menu li {
position:relative;
border-style: solid;
border-width: 1px;
border-top-width: 0px;
padding: 10px;
}
#menu li:hover {
background-color: lightgrey;
font-weight: bold;
}
Check out this CodePen