标题中的下拉菜单有问题答案

【问题标题】：Having problem with dropdown menu in header标题中的下拉菜单有问题
【发布时间】：2021-12-28 22:43:12
【问题描述】：

我试图用列表制作下拉菜单，但我卡住了，因为它看起来不像我想要的那样显然，当我将鼠标悬停时，它会覆盖我未计划的导航栏链接，我希望它位于下方吗？有人吗？

<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>

【问题讨论】：

标签： html css header dropdown

【解决方案1】：

这是代码的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;
}
/* --------------------------------------- */

【讨论】：

【解决方案2】：

在您的 CSS 中尝试删除类之间的空格。例如.content.upper-header

【讨论】：

但是样式不起作用？