Показать список как выпадающий, используя CSS

Question

Я пытаюсь открыть выпадающее меню для фильтра года, с помощью которого необходимо отображать содержимое соответствующим образом.

Ожидаемый результат:

Ниже приведены сценарии:

body {
  font-family: "Ubuntu", Tahoma, Geneva, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 25px;
  color: #9dabaf;
  background-color: #f3f7f9;
  letter-spacing: 0px;
}

.ttm-tabs ul.tabs {
  width: 100%;
  margin: 0;
  padding: 0;
}

.ttm-tabs ul.tabs li {
  display: inline-block;
  margin-right: 5px;
}

.ttm-tabs ul.tabs li a {
  display: block;
  cursor: pointer;
  padding: 8px 25px;
  margin-bottom: 5px;
  line-height: 22px;
  width: auto;
  position: relative;
  z-index: 3;
  background-color: transparent;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid;
  border-radius: 0;
  text-transform: uppercase;
}

<div class="ttm-tabs">
  <ul class="tabs">
    <li class="tab active"><a href="#"> All </a></li>
    <li class="tab"><a href="#">2001</a></li>
    <li class="tab"><a href="#">2002</a></li>
    <li class="tab"><a href="#">2003</a></li>
    <li class="tab"><a href="#">2004</a></li>
    <li class="tab"><a href="#">2005</a></li>
    <li class="tab"><a href="#">2006</a></li>
  </ul>
  <!-- flat-tab end -->
</div>

Примечание : Хотите внести изменения в выше css только

Answer 1

Pure CSS выпадающий, вы можете реализовать на своих проектах

body {
  color: #000000;
  font-family: Sans-Serif;
  padding: 30px;
  background-color: #f6f6f6;
}

a {
  text-decoration: none;
  color: #000000;
}

a:hover {
  color: #222222
}


/* Dropdown */

.dropdown {
  display: inline-block;
  position: relative;
}

.dd-button {
  display: inline-block;
  border: 1px solid gray;
  border-radius: 4px;
  padding: 10px 30px 10px 20px;
  background-color: #ffffff;
  cursor: pointer;
  white-space: nowrap;
}

.dd-button:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black;
}

.dd-button:hover {
  background-color: #eeeeee;
}

.dd-input {
  display: none;
}

.dd-menu {
  position: absolute;
  top: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0;
  margin: 2px 0 0 0;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  list-style-type: none;
}

.dd-input+.dd-menu {
  display: none;
}

.dd-input:checked+.dd-menu {
  display: block;
}

.dd-menu li {
  padding: 10px 20px;
  cursor: pointer;
  white-space: nowrap;
}

.dd-menu li:hover {
  background-color: #f6f6f6;
}

.dd-menu li a {
  display: block;
  margin: -10px -20px;
  padding: 10px 20px;
}

.dd-menu li.divider {
  padding: 0;
  border-bottom: 1px solid #cccccc;
}

<label class="dropdown">

  <div class="dd-button">
  Select Year
  </div>

  <input type="checkbox" class="dd-input" id="test">

  <ul class="dd-menu">
    <li>2000</li>
    <li>2001</li>
    <li>2002</li>
    <li class="divider"></li>
    <li>
      2003
    </li>
     <li>
      2004
    </li>
  </ul>
  
</label>

Answer 2

Вы должны использовать тег select в html !!!!

 <label for="years">Choose a year:</label>

<select id="years">
  <option value="2000">2000</option>
  <option value="2001">2001</option>
  <option value="2002">2002</option>
  <option value="2003" selected>2003</option>
   <option value="2004">2004</option>
   <option value="2005">2005</option>
   <option value="2006">2006</option>
   <option value="2007">2007</option>
   <option value="2008">2008</option>
  
</select> 

Answer 3

Для этого вы должны использовать selectbox:

  <select class="tabs">
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    <option>2003</option>
    <option>2004</option>
    <option>2005</option>
    <option>2006</option>
    <option>2007</option>
  </select>