Css dropdown list

Question:

it is necessary to make a drop-down list using only css, each menu item in itself has several more (the first for example 2, and the second 3) how to make the height of the item on hover increase by 2 or 3 times, depending on the item. Is it possible only by means of css ??

Answer:

If I understand you correctly, this will help:

Html

<ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Frontend Development</a>
    <ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a>
        <ul>
          <li><a href="#">Resets</a></li>
          <li><a href="#">Grids</a></li>
          <li><a href="#">Frameworks</a></li>
        </ul>
      </li>
      <li><a href="#">JavaScript</a>
        <ul>
          <li><a href="#">Ajax</a></li>
          <li><a href="#">jQuery</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Backend Dev</a>
    <ul>
      <li><a href="#">Ruby</a>
        <ul>
          <li><a href="#">Ruby on Rails</a></li>
          <li><a href="#">Sinatra</a></li>
        </ul>
      </li>
      <li><a href="#">PHP</a>
        <ul>
          <li><a href="#">WordPress</a></li>
          <li><a href="#">Symfony</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><p>From Russia with <span class="fa fa-heart"</span></p></li>
</ul>

SCSS

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #1bc2a2;

  li {
    display: block;
    position: relative;
    float: left;
    background: #1bc2a2;

    ul { 
      display: none; 

      li { border-top: 0; }
    }

    a {
      display: block;
      padding: 1em;
      text-decoration: none;
      white-space: nowrap;
      color: white;

      &:hover { background: #2c3e50; }
    }

    p {
      color: white;
      padding-left: 1em;

      & span {
        color: red;
      }
    }
  }
}

li:hover {

  > ul {
    display: block;
    position: absolute;
  }

  li {
    float: none;

    & a:hover { background: #2c3e50; }
  }

  a { background: #1bc2a2; }
}

ul ul ul {
  left: 100%;
  top: 0;
}

// Clearfix 

ul {

  &:before, &:after {
    content: " ";
    display: table;
  }

  &:after { clear: both; }
}

You can play CodePen here .