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
<!-- begin snippet: js hide: false console: true babel: false -->
$(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
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/22f7b461fc.js" crossorigin="anonymous"></script>
</head>
<header>
<div >
<div >
<div ><span>D</span></div>
<ul >
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
<div >
<img src="https://s6.uupload.ir/files/profile-pic_qqbw.png" >
<ul onclick="click()">
<li >
manimonji
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" stroke="white" stroke-width="2" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="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" />
</svg>
</li>
<li>hi</li>
</ul>
</div>
</div>
</div>
</header>
<body>
<div >
<h1 >Feel The Darkness</h1>
<p>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.
</p>
<h1 >Light Is Bad, Shadow Is Good</h1>
<p>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.
</p>
<h1 >Color, LOL</h1>
<p>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.
</p>
</div>
<div >
<footer>
<div >
<div > © 2022 Mani Monji, All Rights Reserved</div>
<div >
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
<path d="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" />
</svg></a>
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
<path d="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" />
</a>
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
<path d="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" />
</svg></a>
</div>
</div>
</footer>
</div>
</body>
</html>
CodePudding user response：
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%;
}
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/22f7b461fc.js" crossorigin="anonymous"></script>
</head>
<header>
<div >
<div >
<div ><span>D</span></div>
<ul >
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
<div >
<img src="https://s6.uupload.ir/files/profile-pic_qqbw.png" >
<ul onclick="click()">
<li >
manimonji
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" stroke="white" stroke-width="2" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="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" />
</svg>
</li>
<li>hi</li>
</ul>
</div>
</div>
</div>
</header>
<body>
<div >
<h1 >Feel The Darkness</h1>
<p>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.
</p>
<h1 >Light Is Bad, Shadow Is Good</h1>
<p>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.
</p>
<h1 >Color, LOL</h1>
<p>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.
</p>
</div>
<div >
<footer>
<div >
<div > © 2022 Mani Monji, All Rights Reserved</div>
<div >
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
<path d="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" />
</svg></a>
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
<path d="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" />
</a>
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
<path d="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" />
</svg></a>
</div>
</div>
</footer>
</div>
</body>
</html>