Proper Submenu Using Only Html+css

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

Solution 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/

Solution 2:

Use position:absolute on the ul and position:relative on the LI:

HTML:

<ulid="menu"><li>Item 1</li><li>Folder 1
      <ul><li>Item 2</li></ul></li><li>Item 3</li></ul>

CSS:

#menu, #menuul {
    border-style: solid;
    border-width: 0px;
    border-top-width: 1px;
    float: left;
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: 180px;
}

#menuliul {
    background-color: cyan;
    display: none;
    position: absolute;
    top:-1px;
    left: 178px;
}

#menuli:hoverul {
    display: block;
}

#menuli {
    position:relative;
    border-style: solid;
    border-width: 1px;
    border-top-width: 0px;
    padding: 10px;
}

#menuli:hover {
    background-color: lightgrey;
    font-weight: bold;
}

Check out this CodePen