Drop Down Menu Drop Down

Projects Personal Projects
1

I am not sure why, but my drop down menu won’t drop. I am using the w3schools examples. I am trying to make it sticky, responsive, and of course drop down. However when I hover over the Services tab. Nothing shows up. Not even when I click on it. I am not sure what I am doing wrong. Here is the code that I currently have.

HTML

<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OuterBox Images</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>
    <header>
        <img src="logo.png" alt="logo"/>
    </header>
    <nav>
        <ul class="topnav">
            <li><a class="active" href="#">Home</a></li>
            <li class="dropdown">
                <a href="javascript:void(0)" class="dropbtn">Services</a>
                    <div class="services">
                        <a href="#">Pictures</a>
                        <a href="#">Video</a>
                        <a href="#">Logo Design</a>
                        <a href="#">Web Design</a>
                    </div>
                </li>
            <li><a href="#">Scheduling</a></li>
            <li><a href="#">Orders</a></li>
        </ul>
    </nav>
</body>

CSS

* {
    box-sizing: border-box;
}

header {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: darkviolet;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

ul.topnav li {
    float: left;
}

ul.topnav li a, .dropbtn {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul.topnav li a:hover:not(.active) {
    background-color: #111111;
}

ul.topnav li a.active {
    background-color: #4caf50;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: #4caf50;
}

li.dropdown {
    display: inline-block;
}

.services {
    display: none;
    position: absolute;
    background-color: grey;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.services a:hover {
    background-color: crimson;
}

.dropdown:hover .services {
    display: block;
}

@media only screen and(min-width: 320px) and (max-width: 480px) {

}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
		/* CSS ruleset */
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    /* CSS ruleset */
}

Here are the links that I am using from w3schools’ menus that I am trying to combine and use as one.

2

Change .services position to relative, and see what happens.

If you want to use absolute, you might want to give the parent a relative position, so the children can position themselves relative to that parent, rather than the browser window.