Выпадающее меню без использования списка

* {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  display: grid;
  margin: 0px;
  grid-gap: 0px;
  grid-template-columns: 1fr;
  grid-template-rows: 70px calc(100vh - 70px);
}

.header {
  background: red;
  display: grid;
}

.header--container {
  width: 1160px;
  justify-self: center;
  display: grid;
  grid-column: 1;
  grid-row: 1;
  grid-auto-flow: column;
}

.header--container span:first-child {
  background: purple;
  display: grid;
  grid-auto-flow: column;
  justify-items: left;
  display: grid;
  align-items: center;
}

.header--container nav {
  background: black;
  display: grid;
  grid-auto-flow: column;
  justify-items: center;
  display: grid;
  align-items: center;
}

.header--container span:last-child {
  background: yellow;
  display: grid;
  grid-auto-flow: column;
  justify-items: right;
  display: grid;
  align-items: center;
}

.hero {
  background: blue;
  display: grid;
}

.hero--container {
  width: 1160px;
  justify-self: center;
  background: pink;
}

.site-navigation .menu-item {
  color: #fff;
  background: #3498db;
  display: block;
}

.site-navigation .menu-item a {
  color: #fff;
  text-decoration: none;
  display: block;
}

.site-navigation .menu-item:hover {
  background: #52a6df;
  cursor: pointer;
}

.dropdown {
  background: #52a6df;
  visibility: hidden;
  position: absolute;
  transition: visibility 0.65s ease-in;
  z-index: 999;
}

a:hover>.dropdown,
a .dropdown:hover {
  visibility: visible;
  z-index: 9999;
}

<div class = "header">
  <div class = "header--container">
    <span><a href = ""><img src = "https://via.placeholder.com/100" alt = "logo" height = "50px"></a></span>
    <nav id = "navigation" class = "site-navigation" role = "navigation">
      <a href = "#" class = "menu-item">News</a>
      <a href = "#" class = "menu-item">Snippets
        <div class = "dropdown">
          <span href = "#"class = "menu-item sub-menu">CSS</span>
          <span href = "#" class = "menu-item sub-menu">HTML</span>
          <span href = "#" class = "menu-item sub-menu">jQuery</span>
          <span href = "#" class = "menu-item sub-menu">PHP</span>
          <span href = "#" class = "menu-item sub-menu">WordPress</span>
        </div>
      </a>
      <a href = "#" class = "menu-item">Inspiration</a>
      <a href = "#" class = "menu-item">Tools</a>
      <a href = "#" class = "menu-item">Tutorials</a>
    </nav>
    <span><a href = "">01442 817767</a></span>
  </div>
</div>
<div class = "hero">
  <div class = "hero--container">cd</div>
</div>