Div with position absolute does not behave as it should

March 24, 2023

I am having trouble with the design of a simple menu in the header of an html document. In this reduced version, the menu is supposed to have three items next to each other (horizontally) and a fourth item directly under the third. So I ensure that at least the third item has relative positioning and the container that wraps the fourth item has absolute positioning with left: 0. So far, everything works as expected.

However, when I put an tag around the fourth item, this item moves to the very left of the screen, along with its surrounding container. Why is that, and what can I do against it? I need that tag.

The following fiddle shows the situation before including the tag: https://jsfiddle.net/Marconi_1900/uocmvrb0/7/

Thank you for your help.

I tried to surround the fourth item with an unordered list tag, making the fourth item the first on that list. It did not help, though.

>Solution :

You should be able to add additional markup, just make sure it is inside your #dropdown container.

#third {
  position: relative;
}
#dropdown {
  position: absolute;
  width: 100px;
  left: 0;
}
#dropdown ul {
  border: 1px solid red;
  padding: 0;
}
#dropdown ul li {
  list-style: none;
}

<!DOCTYPE html>
<html lang="en">
   
<header>
  <nav >
      <a>First item</a> 
      <a>Second item</a>
      <a id="third">Third item
        <div id="dropdown">
          <ul>
            <li>AAA</li>
            <li>BBB</li>
            <li>CCC</li>
          </ul>
        </div>     
      </a>
  </nav>
</header>

</html>