Having problem with dropdown menu in header-CodePudding

I was trying to make dropdown menu with lists but i stuck cuz it's not looking how i wanted apparently when i hover it overwrites my navbar links which was not planned, I want it to go underneath? anyone?

<body>
<div >
    <div >
        <div >
            <div >
                <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 >
            <ol>
                <li>WHO WE ARE<svg width="10" height="5"  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 >
                    <ul>
                        <li><a href="#">About Riot</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div>
                <li>NEWS<svg width="10" height="5"  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>

CodePudding user response：

Here is the css of the code. (Sorry new to this website im not quite experienced in posting)

*{
    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;
}
/* --------------------------------------- */

CodePudding user response：

In your CSS try removing the spaces between the classes. For example .content.upper-header