Vertical links

by ggamir

HTML

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Blog</a></li>
  <li class="dropdown">
    <a href="#" class="dropdown-btn">Dropdown</a>
    <div class="dropdown-menu">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 4</a>
    </div>
  </li>
</ul>

CSS

body {
  font-family: 'Arial', sans-serif;
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #1ebb90;
  overflow: hidden;
}

li {
  float: left;
}

li a,
.dropdown-btn {
  display: inline-block;
  padding: 18px 22px;
}

div.dropdown-menu > a {
  display: block;
}