CSS Dropdown menu won't hide/display properly

user_14887928 0
Viewed 210

I tried searching and finding out how to make a dropdown menu and they all say to use display: none then when hover display block which makes sense but I can't seem to make it work in my code, what I want is to be able to hover my span element and be able to have a dropdown menu come form it.

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

    .dropdown-content {
       display: none;
       position: absolute;
       z-index: 1;
       width: 10rem;
       overflow: auto;
    }

    .dropdown:hover,
    .dropdown-content {
       display: block;
    }
<div class="user-nav__user">
  <img
    src="img/user.jpg"
    alt="User photo"
    class="user-nav__user-photo"
  />
  <div class="dropdown">
    <span class="user-nav__user-name">Jonas</span>
    <div class="dropdown-content">
      <a href="#">Test 1</a>
      <a href="#">Test 2</a>
      <a href="#">Test 3</a>
    </div>
  </div>
</div>

css html
1 Answers

Remove the comma between .dropdown:hover and .dropdown-content in the css like this:

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

    .dropdown-content {
       display: none;
       position: absolute;
       z-index: 1;
       width: 10rem;
       overflow: auto;
    }

    .dropdown:hover
    .dropdown-content {
       display: block;
    }
<div class="user-nav__user">
  <img
    src="img/user.jpg"
    alt="User photo"
    class="user-nav__user-photo"
  />
  <div class="dropdown">
    <span class="user-nav__user-name">Jonas</span>
    <div class="dropdown-content">
      <a href="#">Test 1</a>
      <a href="#">Test 2</a>
      <a href="#">Test 3</a>
    </div>
  </div>
</div>

user_150513100
Related