<nav class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropdown-button">
      Dropdown &#9663;
    </button>
    <div class="dropdown-content">
      <a href="#">Item 1</a>
      <a href="#">Item 2</a>
      <a href="#">Item 3</a>
    </div>
  </div>
</nav> 
.navbar {
  display: flex;
  align-items: baseline;
  background-color: black;
  font-family: sans-serif;
}

.dropdown {
  position: relative;
  margin: 0;
}

.dropdown-button {
  margin: 0;
  padding: 15px;
  background-color: transparent;
  border: 0;
  color: white;
  font-size: 1rem;
}

.dropdown-content {
  position: absolute;
  top: 49px;
  left: 0px;
  display: grid;
  grid-gap: 10px;
  
  min-width: 125px;
  
  background-color: #f9f9f9;
  box-shadow: 3px 3px 5px rgba(0,0,0, 0.5);
}

.navbar a {
  margin: 0;
  padding: 15px;
  color: white;
  text-decoration: none
}

.navbar a:hover {
  background-color: red;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.