How can I create a dropdown menu using only CSS

Question

I am working on a website right now but I am having trouble getting simple CSS to do what I want it to do. I am trying to create a dropdown menu that becomes visible when hovered over on mobile. I have the dropdown menu already created and hidden, and I have the hamburger icon created as well.

I have tried using JavaScript but I literally hate JavaScript. I don't even want to bring that up haha. After I realized I was getting nowhere with JavaScript, I figured I should be able to do it using only CSS. I have re-written the code several times thinking I made a typo that I cannot find.

@media screen and (max-width:768px){

    .topNav{
        position: absolute;
        right: 0px;
        height: 92vh;
        top: 10vh;
        width: 300px;
        background-color: #001d4c;
        z-index: 1;
        display:none;
        flex-direction: column;
        align-items: center;
        width: 40%;
        transition: transform 0.5s ease-in;
    } 
    .burger{
        display:block;
    }
    .burger:hover .topNav {
        display:flex;

    }

    }

I expect to be able to have a dropdown menu when the burger is clicked on. The burger btw is just 3 horizontal lines with nothing special attached to them. However, when i try to click on it or hover over it, nothing happens.

When I change the display on the topNav class to flex, it shows the menu perfectly fine, but it is not wanting to show when I hide it until i hover.

Answer 1

As per Adrian's comment on your question, there's a compact and standard-conforming example on the W3 Schools website.

Rather than just link the code though, I thought I'd explain it as well to give you a better idea of what's going on and what you need to achieve.

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

The idea is to utilize a Parent and a Child's relationship to eachother when position: attribute is used. Let's see what that CSS is (again, taken from the W3 Schools example):

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

The parent .dropdown has its positioning set to relative, which allows it to dynamically position itself with relation to both other elements and its own children.

The child .dropdown-content is initially set to display:none which will remove it from the DOM (it will not be rendered). Its position is set to absolute. Absolute positioning will position content relative to the nearest parent that is either relative or the window object itself. That's why you often see absolute positioning being used to fix something to the top or bottom of screen. Combined with the parent .dropdown having relative positioning, it means our dropdown child will neatly attach itself to its parent (hence why the HTML has the dropdown-content inside the parent).

The only thing left is the hover functionality. Whenever the user hovers over the parent dropdown, the child dropdown will have its display property changed so it appears.

This gives you the functionality and flexibility you're looking for without javascript, and without a particularly complex CSS solution.