我试图用列表制作下拉菜单，但我坚持了下来，因为它看起来不像我想要的那样很明显，当我悬停时，它覆盖了我的导航栏链接，这是没有计划的，我想让它进入下面？任何人
<body>
<div class="content">
<div class="upper-header">
<div class="navbar">
<div class="logo">
<img id="header-logo" src="./img/riot-games-logo.png" alt="riot-games-logo" width="85px"><a id="header-icon-link" href="index.html"><img id="header-icon" src="./img/icon.png" alt="riot-games-logo" width="30px"></a>
</div>
<div class="dropdown">
<ol>
<li>WHO WE ARE<svg width="10" height="5" class="_16evwnRjE9JvfFbOuuC-EF _1lBECl9xmO0n7vnCvf6_dD" viewBox="0 0 8 5"><path d="M.707 1.707l2.586 2.586a1 1 0 001.414 0l2.586-2.586C7.923 1.077 7.477 0 6.586 0H1.414C.524 0 .077 1.077.707 1.707z" fill="#7E7E7E"></path><title>mainNavArrowDown</title></svg></li>
<div class="navbar-content">
<ul>
<li><a href="#">About Riot</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<li>NEWS<svg width="10" height="5" class="_16evwnRjE9JvfFbOuuC-EF _1lBECl9xmO0n7vnCvf6_dD" viewBox="0 0 8 5"><path d="M.707 1.707l2.586 2.586a1 1 0 001.414 0l2.586-2.586C7.923 1.077 7.477 0 6.586 0H1.414C.524 0 .077 1.077.707 1.707z" fill="#7E7E7E"></path><title>mainNavArrowDown</title></svg></li>
</ol>
</div>
</div>
</div>
</div>
</body>
这是代码的css。(很抱歉，我是这个网站的新手，在发帖方面经验不足(
*{
margin:0;
padding:0;
border:0;
}
::selection {
background-color: lightcoral;
}
.content{
position:relative;
background-image: url("./img/1-wallpaper.jpg");
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height:700px;
}
.content .upper-header .navbar {
position:relative;
width:100%;
height:80px;
display:flex;
}
.content .upper-header .navbar .logo #header-logo{
margin-left:30px;
margin-right: 30px;
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
.content .upper-header .navbar .logo #header-icon {
position:absolute;
top: 27px;
display:inline-block;
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
.content .upper-header .navbar .logo img:hover {
opacity: 1;
/*Reflection*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0, 0, 0, 0.4)));
filter: drop-shadow(0 0 0.75rem rgba(216, 215, 211, 0.74));
}
/* NAVIGACIJA */
.content .upper-header .navbar ol{
overflow: hidden;
padding-left: 5%;
padding-right: 5%;
margin-bottom: 1em;
list-style-type: none;
display:flex;
flex-wrap: nowrap;
}
.dropdown {
position: relative;
display: inline-block;
}
.content .upper-header .navbar ol li{
color: rgb(rgb(255, 255, 255), green, blue);
white-space: nowrap;
margin: 1em;
text-align: left;
font-family: 'Sans Serif';
font-weight: bold;
color: white;
padding:1em;
}
/* padajuci menu */
.navbar-content {
display: none;
position: absolute;
background-color: red;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.navbar-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.content .upper-header .navbar ol li:hover:nth-child(1) ~ .navbar-content {
display:block;
}
/* strelica u headeru */
.content .upper-header .navbar ol li svg {
margin-left:3px;
margin-bottom:2px;
}
/* --------------------------------------- */
在CSS中，尝试删除类之间的空格。例如.content.upper-header