我目前正在处理多个css下拉菜单，问题在于菜单出现的位置。正如你所看到的，商店菜单在它自己的位置，但服务菜单显示在与商店菜单相同的位置。我是前端web开发的新手，所以有人可以帮我解决这个问题吗？
*{
margin: auto;
}
a{
text-decoration: none;
}
header{
display: flex;
direction: ltr;
background-color: gold;
padding: 15px;
}
.primaryHeaderMenu ul li ul{
position: absolute;
display: none;
padding: 15px 15px;
background-color: lightslategrey;
list-style: none;
margin: 0;
}
.primaryHeaderMenu ul li ul li{
padding-bottom: 10px;
}
.primaryHeaderMenu ul li:hover ul{
display: block;
}
.primaryItems{
display: inline;
padding-left: 30px;
}
.primaryHeaderMenu li a{
color: black;
font-weight: bold;
}
.secondaryHeaderMenu li a{
color: black;
font-weight: bold;
}
.primaryHeaderMenu{
flex-grow: 1;
}
.secondaryHeaderMenu li{
display: inline;
padding-left: 25px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<title>Irancell</title>
</head>
<body>
<header>
<div class="irancellLogo">
<a href="#">
<img src="/iracell_logo.png" alt="Irancell" width="60px" height="60px">
</a>
</div>
<div class="primaryHeaderMenu">
<ul>
<li class="primaryItems"><a href="#">Shop</a>
<ul>
<li><a href="#">ُSimcards</a></li>
<li><a href="#">Packages</a></li>
<li><a href="#">Devices</a></li>
<li><a href="#">Methods</a></li>
</ul>
</li>
<li class="primaryItems"><a href="#">Services</a>
<ul>
<li><a href="#">HighSpeed Net</a></li>
<li><a href="#">Applications</a></li>
<li><a href="#">Conversation</a></li>
<li><a href="#">Messaging</a></li>
<li><a href="#">Entertainment</a></li>
</ul>
</li>
<li class="primaryItems"><a href="#">Festivals</a></li>
<li class="primaryItems"><a href="#">Support</a></li>
<li class="primaryItems"><a href="#">About Us</a></li>
<li class="primaryItems"><a href="#">Cooperation</a></li>
</ul>
</div>
<div class="secondaryHeaderMenu">
<ul>
<li>
<img src="/search.png" alt="Search">
</li>
<li>
<a href="#">Login</a>
</li>
<li>
<a href="#">Register</a>
</li>
</ul>
</div>
</header>
</body>
</html>将position: relative;添加到.primaryItems类。然后将left: 0;添加到您的.primaryHeaderMenu ul li ul类中。问题是position: absolute;将其自身提升到HTMLDOM中第一个相对定位的元素，然后它们相互重叠，因为它们具有相同位置的相同父元素。W3Cschools上有这样的交互式示例。
我希望以下内容对您有用。
尝试更换
.primaryItems {
display: inline;
margin-left: 30px;
}
带有
.primaryItems {
display: inline;
margin-left: 30px;
position: relative; // New Line
}
和
尝试更换
.primaryHeaderMenu ul li ul {
position: absolute;
display: none;
padding: 15px 15px;
background-color: lightslategrey;
list-style: none;
margin: 0;
}
带有
.primaryHeaderMenu ul li ul {
position: absolute;
display: none;
padding: 15px 15px;
background-color: lightslategrey;
list-style: none;
margin: 0;
left: 0; // New Line
}
此处的示例：https://codepen.io/yasgo/pen/BaLNvBN