我目前正在处理多个css下拉菜单，问题是在菜单出现的位置。正如您所看到的，Shop菜单在它自己的位置上，但是services菜单显示在与Shop菜单之前相同的位置上。我是一个新的前端网络开发，所以任何人可以帮助我解决这个问题，请？
null
*{
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>null
将position:relative；添加到.PrimaryItems类中。然后将left:0；添加到.PrimaryHeaderMenu ul li ul类中。问题是position:absolute；将自身提升到HTML DOM中第一个相对定位的元素，然后它们彼此重叠，因为它们具有相同位置的相同父元素。在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
