我想从下拉菜单中删除包装器左右两侧的21.1px填充，但重要的是，我尝试的其他方法都不起作用。提前感谢您提出的解决方案。(我说的1050px及以下的情况应该更正。(Codepen：https://codepen.io/BerkayAkgurgen/pen/ExgWKJX
const menuBtn = document.querySelector('.hamburger-menu');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
if (!menuOpen) {
menuBtn.classList.add('open');
menuOpen = true;
} else {
menuBtn.classList.remove('open');
menuOpen = false;
}
});@media screen and (max-width: 1050px) {
.hamburger-menu{
cursor: pointer;
transition: .6s;
transition: all .5s ease-in-out;
padding-right: 15px;
}
.line{
position: relative;
display: inline-block;
width: 12px;
height: 2px;
background-color: white;
transition: all .5s ease-in-out;
}
.line::before,
.line::after{
position: absolute;
content: '';
width: 16px;
height: 2px;
background-color: white;
box-shadow: 0 5px 2px -2px black;
transition: all .5s ease-in-out;
}
.line::before{
transform: translateY(6px);
}
.line::after{
transform: translateY(-6px);
}
.hamburger-menu:hover{
transform: translateY(-25%);
}
.hamburger-menu:hover .line:before{
box-shadow: 0 5px 10px 1px black;
}
.hamburger-menu.open .line{
transform: translateX(-50px);
background: transparent;
box-shadow: none;
}
.hamburger-menu.open .line::before{
transform: rotate(45deg) translate(35px, -35px);
}
.hamburger-menu.open .line::after{
transform: rotate(-45deg) translate(35px, 35px);
}
#site-header{
padding: 0px;
}
.wrapper{
position: absolute;
background-color: rgb(142, 101, 192);
top: 100%;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
padding: 0px 21.1px;
}
.list{
flex-direction:column;
width: 100%;
}
.list .list-item{
padding: 14.1px 21.1px;
width: 100%;
background-color: rgb(142, 101, 192);
}
.list-item i{
top: 16.5px;
left: 92px;
}
.account-menu{
flex-direction: column;
width: 100%;
}
.account-menu .account-item{
padding: 14.1px 0px;
width: 100%;
}
.account-menu .theme{
display: block;
margin: 37.5px 0px;
padding: 19px 15.6px;
text-align: center;
background-color: white;
transition: .4s;
}
.theme:hover{
transform: scale(1.05);
background-color: white;
border: none;
box-shadow: 0 4px 15px 1px;
}
.theme .item-paragraph{
padding: 0px 12px;
color: rgb(42, 33, 54);
font-size: 20px;
}
.dropdown{
width: 100%;
padding: 0px !important;
background-color: rgba(0, 0, 0, 0.2);
}
}
@media screen and (min-width: 1051px) {
.dropdown{
position: absolute;
opacity: 0;
background-color: white;
top: 37px;
min-width: 231px;
padding: 12px 0px;
border-radius: 4px;
transition: all .9s ease;
}
.item-4:hover .dropdown{
opacity: 1;
transform: translateY(0);
}
.dropdown .dropdown-item{
position: relative;
padding: .7em;
}
.dropdown .dropdown-item:hover{
background-color: hsl(0, 0%, 93%);
}
.dropdown .dropdown-item .dropdown-header{
display: inline-block;
color: black;
margin-bottom: 5px;
font-size: 20.5px;
font-weight: 600;
}
.dropdown .dropdown-item .dropdown-span{
display: block;
color: #665c73;
font-size: 13.8px;
font-weight: 400;
font-weight: normal;
}
.account-menu .theme:hover{
background-color: white;
border: none;
transform: scaleY(1.08);
box-shadow: 0 5px 2px -2px var(--text-color-nav);
transform: translateY(-10%);
}
.account-menu .theme:hover a{
color: var(--text-color-body);
}
.account-menu .theme a{
padding: 0px 14px;
font-size: 20px;
font-weight: 700;
}
.theme:hover a{
display: inline-block;
animation: shake 1s;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.dropdown-item > a > .dropdown-header::after {
content: '';
display: block;
width: 0;
height: 2px;
background: black;
transition: width .3s;
}
.dropdown-item:hover a > .dropdown-header::after {
width: 100%;
transition: width .3s;
}
.list-item > a::after {
position: absolute;
bottom: -6px;
content: '';
display: block;
width: 0;
height: 2px;
background: #fac919;;
transition: width .3s;
}
.list-item > a:hover::after {
width: 100%;
transition: width .3s;
}
.list-item > a::after {
position: absolute;
bottom: -6px;
content: '';
display: block;
width: 0;
height: 2px;
background: #fac919;;
transition: width .3s;
}
.list-item > a:hover::after {
width: 100%;
transition: width .3s;
}
.account-menu .log-in > a::after {
position: absolute;
content: '';
display: block;
width: 0;
height: 2px;
background: #fac919;;
transition: width .3s;
}
.account-menu .log-in > a:hover::after {
width: 16%;
transition: width .3s;
}
}
*,
*::before,
*::after{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
:root {
--bg-color: rgba(142, 101, 192);
--color-light: rgb(255, 255, 255);
--btn-text-color: rgb(0, 202, 182);
--text-color-body: rgb(47, 47, 47);
--text-color-nav:rgb(42, 33, 54);
--hover-color: #fac919;
}
/*
Adelle
font-family: 'Varta', sans-serif;
*/
body{
font-family: 'Roboto', sans-serif;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: black;
}
#site-header{
position: sticky;
top: 0px;
z-index: 999;
width: 100%;
background-color: var(--bg-color);
padding: 0px 48px;
}
#site-header::before{
position: absolute;
content: '';
width: 50%;
right: 0px;
top: 0px;
height: 100%;
background-image: url(./img/nokta6.png);
background-position: center;
background-size: cover;
}
#top-bar{
max-width: 1240px;
margin: 0px auto;
}
.flex-wrapper{
position: relative;
height: 91px;
display: flex;
align-items: center;
justify-content: space-between;
}
.wrapper{
position: relative;
display: flex;
justify-content: space-between;
width: 75%;
margin-left: auto;
height: 100%;
}
.brand-logo{
display: flex;
align-items: center;
min-height: 100%;
}
.nav-list{
display: flex;
height: 100%;
}
.nav-list .list{
display: flex;
align-items: center;
}
.list-item{
position: relative;
margin: 0px 12px;
}
.list-item a{
display: inline-block;
color: white;
font-size: 18px;
font-weight: 600px;
font-weight: bolder;
}
.item-4 a:hover i{
opacity: 1;
}
.list-item i{
position: absolute;
opacity: .6;
top: 2px;
left: 92px;
}
.account{
position: relative;
display: flex;
min-height: 100%;
}
.account .account-menu{
display: flex;
align-items: center;
}
.account-menu a{
display: inline-block;
color: white;
font-size: 18px;
font-weight: 600px;
font-weight: bolder;
}
.account-menu .theme{
background-color: var(--bg-color);
border: 0.12em solid white;
border-radius: 4px;
padding: 0.6em 1.1em 0.7em;
cursor: pointer;
transition: transform .3s;
}
.account-menu .log-in{
padding: 0px 12px;
}<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Pixel Grade</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' href='main.css'>
<link rel="stylesheet" media="(min-width:1051px)" href="desktop.css"/>
<link rel="stylesheet" media="(max-width:1050px)" href="mobile.css"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Varta:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Varta:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header id="site-header">
<nav id="top-bar">
<div class="flex-wrapper">
<div class="brand-logo">
<img src="./img/logo2.png" alt="Logo" width="190px" style="cursor: pointer;">
</div>
<div class="wrapper">
<div class="nav-list">
<ul class="list">
<li class="list-item item-1"><a href="#" class="item-paragraph">Themes</a></li>
<li class="list-item item-2"><a href="#" class="item-paragraph">About</a></li>
<li class="list-item item-3"><a href="#" class="item-paragraph">Testimonials</a></li>
<li class="list-item item-4"><a href="#" class="item-paragraph">Resources <span> <i class="fas fa-chevron-down"></i> </span></a>
<ul class="dropdown">
<li class="dropdown-item"><a href="#">
<h2 class="dropdown-header">Upstairs</h1>
<span class="dropdown-span">
Stories and lessons packed into flavored articles
</span>
</a></li>
<li class="dropdown-item"><a href="#" class="item-paragraph">
<h2 class="dropdown-header">Free eBooks</h1>
<span class="dropdown-span">
In-depth guides to apply on your terms
</span>
</a></li>
<li class="dropdown-item"><a href="#" class="item-paragraph">
<h2 class="dropdown-header">Help Center</h1>
<span class="dropdown-span">
Nitty-gritty instructions about our products
</span>
</a></li>
<li class="dropdown-item"><a href="#" class="item-paragraph">
<h2 class="dropdown-header">Contact Us</h1>
<span class="dropdown-span">
The door is open, please enter
</span>
</a></li>
</ul>
</li>
</ul>
</div>
<div class="account">
<ul class="account-menu">
<li class="account-item log-in"><a href="#" class="item-paragraph">Log in</a></li>
<li class="account-item theme"><a href="#" class="item-paragraph"><span class="shake-letter">Ch</span>oose The Theme</a></li>
</ul>
</div>
</div>
<div class="hamburger-menu">
<span class="line"></span>
</div>
</div>
</nav>
</header>
<script src="api.js"></script>
</body>
</html>在css中查找以下代码，相应地调整填充，可以使用"填充：.7rem 0">
.dropdown .dropdown-item{
position: relative;
padding: .7em;
}
更改css代码行：
padding: .7em;
至
padding: .7em 0 .7em 0
如果我说得对。。。