下拉菜单溢出屏幕（宽度方向），修复后我想知道如何更好地控制它的位置以及如何使其位置不相对于 div（ .top-menu），但是下拉按钮。
我基本上是 CSS 和 HTML 的初学者，基本上我不理解位置/显示值，但这不是重点。我猜基本上我一直在阅读 W3School 的文档？我看到了水平导航栏页面，并决定改变我之前的做法（在整个菜单中使用 1 个大 div 元素，然后在内部使用小 div 元素）。 之后，我尝试制作一个下拉菜单，基本上只是复制他们的做法，并注意到一个问题，正如之前所说，下拉菜单超出了屏幕的宽度。
HTML：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="top-menu" class="top-menu">
<ul class="navbar">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li> <div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div></li>
</ul>
</div>
</body>
</html>
CSS：
.top-menu{
height: 1lh;
width: 100%;
background-color: cadetblue;
position: fixed;
top: 0%;
left: 0%;
text-align: end;
line-height: 6;
}
.top-menu a{
padding-right: 25px;
font-family: sans-serif;
}
.test{
margin: auto;
position: absolute;
text-align: center;
top: 40%;
left: 40%;
color: whitesmoke;
background-color: blue;
border: 1px solid black;
width: 100px;
padding: 20px 10px;
}
ul.navbar{
float: right;
list-style-type: none;
margin: 0;
padding-right: 10px;
width: auto;
}
li{
display: inline;
padding: 10px 12px;
background-color: #dddddd;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #BBBBBB;
min-width: 160px;
max-width: 100vw;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px;
z-index: 1;
right: 0;
top: 100%;
box-sizing: border-box;
transform: translateX(10%);
}
.dropdown:hover .dropdown-content {
display: block;
width: fit-content;
text-align: center;
}
还有一些我从 ChatGPT 复制的 JS 代码，但我认为它没有任何作用，所以我没有包含它。
溢出问题（有点）是固定的，基本上问题是我如何控制它的位置（除了
translateX()top: 0%;将
display: inline-block;display: inline;div.dropdown