title: How to set absolute positioned element width to parent node width?
body: <p>after that description. (<a href="https://codepen.io/mani7887/pen/YzYwYdp" rel="nofollow noreferrer">CodePen link</a> )</p>
  <p>to see the problem, hover your mouse on &quot;manimonji&quot;, 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).<br>
  <strong>note</strong>: for solving this, I tried width 100%. But not works.</p>
  <p>JS File</p>
  <pre class="lang-js prettyprint-override"><code>&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
      $(document).ready(function(){
        $(&quot;.profile-name&quot;).mouseenter(function(){
          $(&quot;.profile-dropdown-cont li&quot;).css(&quot;border-color&quot;, &quot;black&quot;);
          $(&quot;.profile-dropdown-cont li&quot;).show();
        });
        $(&quot;.profile-name&quot;).mouseleave(function(){
          $(&quot;.profile-dropdown-cont li&quot;).css(&quot;border-color&quot;, &quot;transparent&quot;);
          $(&quot;.profile-dropdown-cont li&quot;).hide();
        });
      });
  </code></pre>
  <p>CSS file</p>
  <pre class="lang-css prettyprint-override"><code>@import url(&quot;https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;600;700;800;900&amp;display=swap&quot;);
      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: &quot;Jost&quot;, sans-serif;
        color: white;
      }
      .menu-list {
        list-style: none;
        padding: 0;
        display: flex;
      }
      .menu-list &gt; 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 &gt; * {
        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%;
        }
      }
  </code></pre>
  <p>HTML file</p>
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;head&gt;
        &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;https://kit.fontawesome.com/22f7b461fc.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;header&gt;
        &lt;div class=&quot;border&quot;&gt;
          &lt;div class=&quot;header-cont&quot;&gt;
            &lt;div class=&quot;icon&quot;&gt;&lt;span&gt;D&lt;/span&gt;&lt;/div&gt;
            &lt;ul class=&quot;menu-list&quot;&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;div class=&quot;profile-cont&quot;&gt;
              &lt;img src=&quot;https://s6.uupload.ir/files/profile-pic_qqbw.png&quot; class=&quot;profile-img&quot;&gt;
              &lt;ul class=&quot;profile-dropdown-cont&quot; onclick=&quot;click()&quot;&gt;
                &lt;li class=&quot;profile-name&quot;&gt;
                  manimonji
                            &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; class=&quot;down-svg&quot; width=&quot;14&quot; height=&quot;14&quot; stroke=&quot;white&quot; stroke-width=&quot;2&quot; fill=&quot;currentColor&quot; class=&quot;bi bi-chevron-down&quot; viewBox=&quot;0 0 16 16&quot;&gt;
                  &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z&quot; /&gt;
                &lt;/svg&gt;
                &lt;/li&gt;
                &lt;li&gt;hi&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/header&gt;
  
      &lt;body&gt;
        &lt;div class=&quot;content&quot;&gt;
          &lt;h1 class=&quot;min-size&quot;&gt;Feel The Darkness&lt;/h1&gt;
          &lt;p&gt;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.
          &lt;/p&gt;
          &lt;h1 class=&quot;min-size&quot;&gt;Light Is Bad, Shadow Is Good&lt;/h1&gt;
          &lt;p&gt;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.
          &lt;/p&gt;
          &lt;h1 class=&quot;min-size&quot;&gt;Color, LOL&lt;/h1&gt;
          &lt;p&gt;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.
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;footer-border&quot;&gt;
          &lt;footer&gt;
            &lt;div class=&quot;footer&quot;&gt;
              &lt;div class=&quot;copy-right&quot;&gt; &amp;copy; 2022 Mani Monji, All Rights Reserved&lt;/div&gt;
              &lt;div class=&quot;icons&quot;&gt;
                &lt;a href=&quot;#&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; fill=&quot;currentColor&quot; class=&quot;bi bi-facebook&quot; viewBox=&quot;0 0 16 16&quot;&gt;
                    &lt;path d=&quot;M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z&quot; /&gt;
                  &lt;/svg&gt;&lt;/a&gt;
                &lt;a href=&quot;#&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; fill=&quot;currentColor&quot; class=&quot;bi bi-twitter&quot; viewBox=&quot;0 0 16 16&quot;&gt;
                    &lt;path d=&quot;M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z&quot; /&gt;
                &lt;/a&gt;
                &lt;a href=&quot;#&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; fill=&quot;currentColor&quot; class=&quot;bi bi-instagram&quot; viewBox=&quot;0 0 16 16&quot;&gt;
                    &lt;path d=&quot;M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z&quot; /&gt;
                  &lt;/svg&gt;&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/footer&gt;
        &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>