DD Menu

by Petra1999

HTML

<header>
  <h1>Hello World</h1>
  <nav>
  
    <div class="dropdown">
      <a class="dropdown-link" href="#">Onsdfsdfe</a>
      <div class="dropdown-content">
        <a href="#">something</a>
        <a href="#">something</a>
        <a href="#">something</a>
      </div>
    </div>
    
    <div class="dropdown">
      <a class="dropdown-link" href="#">Twosdfsdf</a>
      <div class="dropdown-content">
        <a href="#">something</a>
        <a href="#">something</a>
        <a href="#">something</a>
      </div>
    </div>
    
    <div class="dropdown">
      <a class="dropdown-link" href="#">Thrsdffsee</a>
      <div class="dropdown-content">
        <a href="#">something</a>
        <a href="#">something</a>
        <a href="#">something</a>
      </div>
    </div>
    
  </nav>
</header>

<main>
  Hello!
</main>

SCSS

header {
  display:grid;
  grid-template-columns:1fr 2fr;
  height: 50px;
  background: #efefef;
  h1 {
    margin:0;
    font-size:1.2em;
  }
  nav {
    text-align:right;
  }
}
main {
  opacity:0.5;
}

.dropdown {
  display:inline-block;
  position:relative;
  
  .dropdown-link {
    display:inline-block;
    padding:0.1em 0.5em;
    border-bottom:1px solid;
    color:black;
    text-decoration:none;
  }
  
  .dropdown-content {
    display:none;
    position:absolute;
    top:100%;
    background:white;
    border-left:1px solid;
   // width:100%;
    
    a {
      display:block;
      padding:1em;
      font-size:1.5em;
      
      &:hover {
        background:lightgray;
      }
    }
  }
  
  &:hover .dropdown-content,
  &:focus-within .dropdown-content{
    display:block;
    z-index:1;
  }
  
  
}