How to set absolute positioned element width to parent node width?

Question

after that description. (CodePen link )

to see the problem, hover your mouse on "manimonji", you can see a drop-down list, but width of second li of list, it's not equal with parent width(position of second li is absolute).
note: for solving this, I tried width 100%. But not works.

JS File


    $(document).ready(function(){
      $(".profile-name").mouseenter(function(){
        $(".profile-dropdown-cont li").css("border-color", "black");
        $(".profile-dropdown-cont li").show();
      });
      $(".profile-name").mouseleave(function(){
        $(".profile-dropdown-cont li").css("border-color", "transparent");
        $(".profile-dropdown-cont li").hide();
      });
    });

CSS file

@import url("https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;600;700;800;900&display=swap");
    header,
    .footer-border {
      max-width: 100%;
      background: #1f1d21;
    }
    header{
      position: sticky;
      top:0;
    }
    body {
      margin: 0;
      background: #201e23;
    }
    .header-cont {
      width: 60%;
      height: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
    }
    .icon {
      width: 50px;
      height: 50px;
      background: #1e1c21;
      border: 2px solid white;
      border-radius: 20px;
      margin: 15px 0;
      text-align: center;
      font-size: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 700;
    }
    * {
      font-family: "Jost", sans-serif;
      color: white;
    }
    .menu-list {
      list-style: none;
      padding: 0;
      display: flex;
    }
    .menu-list > li {
      margin: 0px 0px 0px 20px;
      font-size: 20px;
      font-weight: 400;
    }
    .border {
      margin: 0 5px;
      border-bottom: 1px solid #161418;
    }
    .content {
      padding: 10px 0;
    }
    .content,
    .footer {
      max-width: 60%;
      margin: 0 auto;
    }
    .min-size {
      white-space: normal;
      width: fit-content;
    }
    .margin-fix {
    }
    p {
      text-align: justify;
      line-height: 27px;
    }
    footer {
      border-top: 1px solid #161418;
      margin: 0 5px;
      padding: 1px 0;
    }
    .footer > * {
      margin: 20px auto;
      width: fit-content;
    }
    .footer-border {
      position: relative;
      width: 100%;
      bottom: 0;
    }
    .copy-right {
      font-weight: 500;
      font-size: 20px;
    }
    .content-image {
      float: right;
    }
    .icons a *,
    .copy-right {
      opacity: 0.8;
    }
    .icons {
      display: flex;
    }
    .icons svg {
      margin-left: 20px;
      width: 30px;
    }
    a {
      text-decoration: none;
    }
    a *,
    a {
      transition: 0.5s;
    }
    a:hover *,
    a:hover {
      opacity: 1;
    }
    h1,
    p {
      margin: 10px 0;
    }
    .profile-cont {
      margin-left: auto;
      display: flex;
      align-items: center;
      height: 55px;
    }
    .profile-img {
      height: 55px;
    }
    .profile-name {
      display:unset !important;
      font-weight: 600;
    }
    .down-svg {
      padding-top: 5px;
      margin-left: 3px;
    }
    .profile-dropdown-cont{
      padding:0;
      list-style:none;
      cursor:pointer;
    }
    .profile-dropdown-cont li:first-child{
      position:relative;
      border-radius:5px 5px 0 0;
    }
    .profile-dropdown-cont li{
      padding:5px 10px;
      border:solid 1px transparent;
      margin-left: 10px;
      margin-top:5px;
      font-size: 20px;
      position:absolute;
      display:none;
      width:100%;
    }
    @media only screen and (max-width: 1175px){
      .header-cont,.content {
        max-width:80%;
        width:80%;
      }
    }
    @media only screen and (max-width: 900px){
      .header-cont,.content {
        max-width:90%;
        width:90%;
      }
    }

HTML file


    
      
      
    
    
      
        
          D
          
            Home
            About
          
          
            
            
              
                manimonji
                          
              
              hi
            
          
        
      
    

    
      
        Feel The Darkness
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar ligula justo, ac eleifend lorem tempor non. Nunc neque odio, rhoncus eu consequat et, iaculis at sem. Pellentesque venenatis a lorem ut ullamcorper. Praesent blandit tincidunt quam, in dapibus orci tincidunt sed. Aenean dignissim eget leo ac tempus. In diam lacus, fermentum nec nisi at, hendrerit molestie augue. Cras semper leo sit amet turpis placerat, non consectetur urna interdum. Phasellus lorem nunc, convallis vel elementum sodales, vulputate eu ligula. Pellentesque at imperdiet diam.
        
        Light Is Bad, Shadow Is Good
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar ligula justo, ac eleifend lorem tempor non. Nunc neque odio, rhoncus eu consequat et, iaculis at sem. Pellentesque venenatis a lorem ut ullamcorper. Praesent blandit tincidunt quam, in dapibus orci tincidunt sed. Aenean dignissim eget leo ac tempus. In diam lacus, fermentum nec nisi at, hendrerit molestie augue. Cras semper leo sit amet turpis placerat, non consectetur urna interdum. Phasellus lorem nunc, convallis vel elementum sodales, vulputate eu ligula. Pellentesque at imperdiet diam.
        
        Color, LOL
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar ligula justo, ac eleifend lorem tempor non. Nunc neque odio, rhoncus eu consequat et, iaculis at sem. Pellentesque venenatis a lorem ut ullamcorper. Praesent blandit tincidunt quam, in dapibus orci tincidunt sed. Aenean dignissim eget leo ac tempus. In diam lacus, fermentum nec nisi at, hendrerit molestie augue. Cras semper leo sit amet turpis placerat, non consectetur urna interdum. Phasellus lorem nunc, convallis vel elementum sodales, vulputate eu ligula. Pellentesque at imperdiet diam.
        
      
      
        
          
             © 2022 Mani Monji, All Rights Reserved

user_18494366 · Answer

You need to set position: relative; to the parent of your absolute positioned Element. This fixes you problem.

Additionally I've added box-sizing: border-box; on the li, and also added a calc() to calculate the width correctly, since the 100% don't refer to the first li, the it's parent the ul. This means we need to subtract the lis margin to get the correct width.

And a s a sidenote, you could do this completely free of JS, only with CSS :D

$(document).ready(function(){
  $(".profile-name").mouseenter(function(){
    $(".profile-dropdown-cont li").css("border-color", "black");
    $(".profile-dropdown-cont li").show();
  });
  $(".profile-name").mouseleave(function(){
    $(".profile-dropdown-cont li").css("border-color", "transparent");
    $(".profile-dropdown-cont li").hide();
  });
});

@import url("https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;600;700;800;900&display=swap");
header,
.footer-border {
  max-width: 100%;
  background: #1f1d21;
}
header{
  position: sticky;
  top:0;
}
body {
  margin: 0;
  background: #201e23;
}
.header-cont {
  width: 60%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.icon {
  width: 50px;
  height: 50px;
  background: #1e1c21;
  border: 2px solid white;
  border-radius: 20px;
  margin: 15px 0;
  text-align: center;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
}
* {
  font-family: "Jost", sans-serif;
  color: white;
}
.menu-list {
  list-style: none;
  padding: 0;
  display: flex;
}
.menu-list > li {
  margin: 0px 0px 0px 20px;
  font-size: 20px;
  font-weight: 400;
}
.border {
  margin: 0 5px;
  border-bottom: 1px solid #161418;
}
.content {
  padding: 10px 0;
}
.content,
.footer {
  max-width: 60%;
  margin: 0 auto;
}
.min-size {
  white-space: normal;
  width: fit-content;
}
.margin-fix {
}
p {
  text-align: justify;
  line-height: 27px;
}
footer {
  border-top: 1px solid #161418;
  margin: 0 5px;
  padding: 1px 0;
}
.footer > * {
  margin: 20px auto;
  width: fit-content;
}
.footer-border {
  position: relative;
  width: 100%;
  bottom: 0;
}
.copy-right {
  font-weight: 500;
  font-size: 20px;
}
.content-image {
  float: right;
}
.icons a *,
.copy-right {
  opacity: 0.8;
}
.icons {
  display: flex;
}
.icons svg {
  margin-left: 20px;
  width: 30px;
}
a {
  text-decoration: none;
}
a *,
a {
  transition: 0.5s;
}
a:hover *,
a:hover {
  opacity: 1;
}
h1,
p {
  margin: 10px 0;
}
.profile-cont {
  margin-left: auto;
  display: flex;
  align-items: center;
  height: 55px;
}
.profile-img {
  height: 55px;
}
.profile-name {
  display:unset !important;
  font-weight: 600;
}
.down-svg {
  padding-top: 5px;
  margin-left: 3px;
}
.profile-dropdown-cont{
  position: relative;
  padding:0;
  list-style:none;
  cursor:pointer;
}
.profile-dropdown-cont li:first-child{
  position:relative;
  border-radius:5px 5px 0 0;
}
.profile-dropdown-cont li{
  /* This is needed, so that the paddings don't get added on the 100% but are included in the 100% */
  box-sizing: border-box;
  padding:5px 10px;
  border:solid 1px transparent;
  margin-left: 10px;
  margin-top:5px;
  font-size: 20px;
  position:absolute;
  display:none;
  /* the parent is the ul, so we need to subtract margin left  */
  width: calc(100% - 10px);
}
@media only screen and (max-width: 1175px){
  .header-cont,.content {
    max-width:80%;
    width:80%;
  }
}
@media only screen and (max-width: 900px){
  .header-cont,.content {
    max-width:90%;
    width:90%;
  }
}




  
  


  
    
      D
      
        Home
        About
      
      
        
        
          
            manimonji
                      
          
          hi
        
      
    
  



  
    Feel The Darkness
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar ligula justo, ac eleifend lorem tempor non. Nunc neque odio, rhoncus eu consequat et, iaculis at sem. Pellentesque venenatis a lorem ut ullamcorper. Praesent blandit tincidunt quam, in dapibus orci tincidunt sed. Aenean dignissim eget leo ac tempus. In diam lacus, fermentum nec nisi at, hendrerit molestie augue. Cras semper leo sit amet turpis placerat, non consectetur urna interdum. Phasellus lorem nunc, convallis vel elementum sodales, vulputate eu ligula. Pellentesque at imperdiet diam.
    
    Light Is Bad, Shadow Is Good
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar ligula justo, ac eleifend lorem tempor non. Nunc neque odio, rhoncus eu consequat et, iaculis at sem. Pellentesque venenatis a lorem ut ullamcorper. Praesent blandit tincidunt quam, in dapibus orci tincidunt sed. Aenean dignissim eget leo ac tempus. In diam lacus, fermentum nec nisi at, hendrerit molestie augue. Cras semper leo sit amet turpis placerat, non consectetur urna interdum. Phasellus lorem nunc, convallis vel elementum sodales, vulputate eu ligula. Pellentesque at imperdiet diam.
    
    Color, LOL
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar ligula justo, ac eleifend lorem tempor non. Nunc neque odio, rhoncus eu consequat et, iaculis at sem. Pellentesque venenatis a lorem ut ullamcorper. Praesent blandit tincidunt quam, in dapibus orci tincidunt sed. Aenean dignissim eget leo ac tempus. In diam lacus, fermentum nec nisi at, hendrerit molestie augue. Cras semper leo sit amet turpis placerat, non consectetur urna interdum. Phasellus lorem nunc, convallis vel elementum sodales, vulputate eu ligula. Pellentesque at imperdiet diam.
    
  
  
    
      
         © 2022 Mani Monji, All Rights Reserved

How to set absolute positioned element width to parent node width?

1 Answers