JSFiddle - React, Tailwind, and code Playground

by Oleg Serebryakov

HTML

<ul class="years">
  <li><a href="#">2015</a>
      <ul class="months">
        <li><a href="#">Январь</a></li>
        <li><a href="#">Февраль</a></li>
        <li><a href="#">Март</a></li>
        <li><a href="#">Апрель</a></li>
        <li><a href="#">Май</a></li>
        <li><a href="#">Июнь</a></li>
        <li><a href="#">Июль</a></li>
        <li><a href="#">Август</a></li>
        <li><a href="#">Сентябрь</a></li>
        <li><a href="#">Октябрь</a></li>
        <li><a href="#">Ноябрь</a></li>
        <li><a href="#">Декабрь</a></li>
      </ul>
  </li>
  <li><a href="#">2014</a>
      <ul class="months">
        <li><a href="#">Январь</a></li>
        <li><a href="#">Февраль</a></li>
        <li><a href="#">Март</a></li>
        <li><a href="#">Апрель</a></li>
        <li><a href="#">Май</a></li>
        <li><a href="#">Июнь</a></li>
        <li><a href="#">Июль</a></li>
        <li><a href="#">Август</a></li>
        <li><a href="#">Сентябрь</a></li>
        <li><a href="#">Октябрь</a></li>
        <li><a href="#">Ноябрь</a></li>
        <li><a href="#">Декабрь</a></li>
      </ul>
  </li>
  <li><a href="#">2013</a>
      <ul class="months">
        <li><a href="#">Январь</a></li>
        <li><a href="#">Февраль</a></li>
        <li><a href="#">Март</a></li>
        <li><a href="#">Апрель</a></li>
        <li><a href="#">Май</a></li>
        <li><a href="#">Июнь</a></li>
        <li><a href="#">Июль</a></li>
        <li><a href="#">Август</a></li>
        <li><a href="#">Сентябрь</a></li>
        <li><a href="#">Октябрь</a></li>
        <li><a href="#">Ноябрь</a></li>
        <li><a href="#">Декабрь</a></li>
      </ul>
  </li>
  <li><a href="#">2012</a>
      <ul class="months">
        <li><a href="#">Январь</a></li>
        <li><a href="#">Февраль</a></li>
        <li><a href="#">Март</a></li>
        <li><a href="#">Апрель</a></li>
        <li><a href="#">Май</a></li>
        <li><a href="#">Июнь</a></li>
        <li><a href="#">Июль</a></li>
      ...

CSS

.years, .months {
  margin: 0;
  padding: 0;
}

.years {
  background: green;
}

.months {
  background: #eee;
}

.years > li {
  float: left;
  height: 20px;
}

.years > li > a {
  line-height: 20px;
}

.years li {
  list-style: none;
  position: relative;
  border: 1px solid #fff;
}

.months {
  position: absolute;
  display: none;
  top: 20px;
  left: -1px;
}

.months > li {
  float: left;
}

.years a {
  display: block;
  padding: 5px;
  text-decoration: none;
}

.years li:hover {
  background: yellow;
}

.years li:hover li:hover a {
  text-decoration: underline;
}

.years li:hover .months {
  display: block;
}

.years li:hover .months li {
  display: inline-block;
}