CSS position absolute and width of parent container in percent

Question

I'm trying to build a HTML/CSS dropdown menu which is flexible in width. Due to the position:absolute for the second level of the navigation, I don't get the width of the first level. Removing the position:absolute will move all following elements on hover...

How can I solve this?

Here is the code:

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.level_1 > li {
  float: left;
  width: 45%;
  background-color: #2FA4CF;
  margin-right: 6px;
}

.level_1 > li:hover ul {
  display: block;
}

.level_2 {
  display: none;
  position: absolute;
  width: 45%;
}

.level_2 li {
  background-color: #535B68;
}

<ul class="level_1">
  <li>
    <a href="#">Level one (1)</a>
    <ul class="level_2">
      <li><a href="#">Level two (1)</a></li>
    </ul>
  </li>
  <li><a href="#">Level one (2)</a></li>
</ul>

<p>Paragraph</p>

See the result here: http://jsfiddle.net/5uf2Y/ Hover "Level one (1)" and you will see, that the second level is not the same size like the first level...

score 102 · Accepted Answer · edited Jan 16 '22 at 13:13

102

You have forgotten two elements for display 100%.

Correction here

1st elements forgets it's : Position relative on level_1 > li

.level_1 > li {
    float: left;
    width: 45%;
    background-color: #2FA4CF;
    margin-right: 6px;
    **position:relative;**
}

2nd elements corrections it's : change size of 2nd li

.level_2 {
    display: none;
    position: absolute;
    width: 100%;
}

With "width:100%" on .level_2 it automatically turns out with the width of its parent.

edited Jan 16 '22 at 13:13

DarkScrolls

581
5
10

answered May 14 '13 at 14:50

artSx

1,560
1
12
19

1

The tl;dr for me: Add `position: relative` and `width: 100%` to the parent of the absolutely positioned element. – HartleySan Nov 29 '22 at 14:17

score 16 · Answer 2 · answered May 14 '13 at 14:51

16

Add position:relative to level_1 > li

.level_1 > li {
    float: left;
    width: 45%;
    background-color: #2FA4CF;
    margin-right: 6px;
    position:relative;
}

answered May 14 '13 at 14:51

Lowkase

5,631
2
30
48

I dont think this fixes the problem. He wants the spacing to be the same, he has a margin-right that is giving the extra space – Cam May 14 '13 at 14:59

score 0 · Answer 3 · answered May 14 '13 at 14:55

Try to set the body { width:100%;} property, it will fix this issue, like shown below (added to your original CSS):

body{ width:100%;}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.level_1 > li {
    float: left;
    width: 45%;
    background-color: #2FA4CF;
    margin-right: 6px;
}
.level_1 > li:hover ul {
    display: block;
}
.level_2 {
    display: none;
    position: absolute;
    width: 45%;
}

.level_2 li {
    background-color: #535B68;
}

score 0 · Answer 4 · edited May 15 '13 at 08:04

0

Hey man you have a margin of 6px on your first row li thats why its a little bigger. I would use a margin left rather than right. That should fix the spacing.

edited May 15 '13 at 08:04

CloudyMarble

36,908
70
97
130

answered May 14 '13 at 14:57

Cam

1,884
11
24

Nm, it seems you have to go 44% on width for it to work, but thats not the responsive appeal you are looking for I assume. – Cam May 14 '13 at 15:01

CSS position absolute and width of parent container in percent

4 Answers4