SEO-friendly Accordion Menu In Pure CSS/CSS3

Preview:

Description:

A smooth, semantic, SEO-friendly accordion menu (dropdown menu) built with HTML unordered list and CSS/CSS3.

How to use it:

Create the accordion menu from a nested HTML unordered list.

<ul>
  <li>
    <p><a href="#t1">GROUP 1</a></p>
      <ul id="t1">
        <li><a href="#">Category</a></li>
        <li><a href="#">Category</a></li>
        <li><a href="#">Category</a></li>
        <li><a href="#">Category</a></li>
        <li><a href="#">Category</a></li>
      </ul>
    <a href="#foo"></a>
  </li>
  <li>
    <p><a href="#t2">GROUP 2</a></p>
    <ul id="t2">
      <li><a href="#">Category</a></li>
      <li><a href="#">Category</a></li>
      <li><a href="#">Category</a></li>
      <li><a href="#">Category</a></li>
      <li><a href="#">Category</a></li>
    </ul>
    <a href="#foo"></a>
  </li>
  <li>
    <p><a href="#t4">GROUP 3</a></p>
    <ul id="t4">
      <li><a href="#">Category</a></li>
      <li><a href="#">Category</a></li>
      <li><a href="#">Category</a></li>
      <li><a href="#">Category</a></li>
      <li><a href="#">Category</a></li>
    </ul>
    <a href="#foo"></a>
  </li>
  <li>
    <p><a href="#t5">GROUP 4</a></p>
    <ul id="t5">
      <li><a href="#">Category</a></li>
      <li><a href="#">Category</a></li>
      <li><a href="#">Category</a></li>
      <li><a href="#">Category</a></li>
      <li><a href="#">Category</a></li>
    </ul>
    <a href="#foo"></a>
  </li>
  <li>
    <p><a href="#t6">GROUP 5</a></p>
    <ul id="t6">
      <li><a href="#">Category</a></li>
      <li><a href="#">Category</a></li>
      <li><a href="#">Category</a></li>
      <li><a href="#">Category</a></li>
      <li><a href="#">Category</a></li>
    </ul>
    <a href="#foo"></a>
  </li>
</ul>

The basic CSS styles for the accordion menu.

ul {
  list-style: none;
  margin: 0;
  max-width: 300px;
  padding: 0;
  width: 100%;
}
ul > li {
  position: relative;
}
ul > li p {
  margin: 0;
}
ul > li p a {
  background: #0ABAB5;
  color: #fff;
  display: block;
  padding: 15px;
  text-decoration: none;
}
ul > li a[href="#foo"] {
  height: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
ul > li a[href="#foo"]::before {
  border: solid #98e9e7;
  border-width: 0 2px 2px 0;
  content: "";
  display: inline-block;
  padding: 4px;
  position: absolute;
  right: 10px;
  top: 12px;
  transition: transform 0.2s ease;
  transform: rotate(-45deg);
  z-index: 1;
}
ul > li ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s ease-out;
}
ul > li ul li a {
  background: #efefef;
  border-bottom: 1px solid #e1e1e1;
  display: block;
  text-decoration: none;
  padding: 10px;
}
ul > li ul li a:hover {
  background: #e1e1e1;
}

Toggle the sub-menu by clicking the header.

ul:target {
  max-height: 800px;
  transition: max-height 2s ease-out;
}
:target + a[href="#foo"] {
  height: 45px;
}
:target + a[href="#foo"]::before {
  transform: rotate(45deg);
}