Proper submenu using only HTML+CSS

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:

submenu problem

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.

You need absolute positioning to prevent elements from being "displaced". That is what absolute positioning is for. — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Aug 9, 2013 at 19:28
@Diodeus: position: absolute means "don't touch your parent's layout and the put the element at x", and position: relative means "change your parent's layout and reposition the element"? — moatPylon
– moatPylon, Commented Aug 9, 2013 at 19:33

Diodeus - James MacFarlane · Accepted Answer · 2013-08-09 20:03:47Z

2

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/

edited Aug 9, 2013 at 20:03

answered Aug 9, 2013 at 19:42

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

moatPylon Over a year ago

Sorry, I don't quite get it. position: absolute does prevent any changes to the parent li, but the sumbenu ul needs to be moved relative to where it should originally be, which can't be done with position: absolute, nor by moving its containing li.

Diodeus - James MacFarlane Over a year ago

position:relative sets the origin point for absolutely-positioned children.

Lost Left Stack · Accepted Answer · 2013-08-09 20:11:05Z

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

Collectives™ on Stack Overflow

Proper submenu using only HTML+CSS

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related