Menu + Submenu example

by Dejan Munjiza

HTML

<ul class="main-menu">
  <li>
    <a>Menu item 1</a>
    <div class="sub-menu color-1">
      
        <h4>Submenu 1</h4>
        <ul>
          <li>Link 1</li>
          <li>Link 2</li>
          <li>Link 3</li>
        </ul>
      
    </div>
  </li>
  <li>
    <a>Menu item 2</a>
    <div class="sub-menu color-2">
      <div>
        <h4>Submenu 2</h4>
        <ul>
          <li>Link 1</li>
          <li>Link 2</li>
          <li>Link 3</li>
        </ul>
      </div>
    </div>
  </li>
  <li>
    <a>Menu item 3</a>
    <div class="sub-menu color-3">
      <div>
        <h4>Submenu 3</h4>
        <ul>
          <li>Link 1</li>
          <li>Link 2</li>
          <li>Link 3</li>
        </ul>
      </div>
    </div>
  </li>
</ul>

CSS

body {
  padding: 0;
  margin: 0;
}

ul {
  padding: 0;
}

li a {
  padding: 10px;
  float: left;
  cursor: pointer;
}

li:hover {
  background: black;
}

li a:hover + .sub-menu {
  opacity: 1;
}

.main-menu {
  width: 100px;
  height: 100%;
  position: absolute;
  top: 0;
  margin: 0;
  float: left;
  text-align: left;
  background: gray;
  list-style: none;
  color: white;
  font-size: 15px;
}

.sub-menu {
  opacity: 0;
  width: 100px;
  position: absolute;
  top: 0;
  left: 100px;
  height: 100%;
  margin: 0;
}

.color-1 {background: #02a1a5;}
.color-1:hover {opacity: 1 !important;}
.color-2 {background: #752C6C;}
.color-3 {background: #297D34;}