<h1>Dropdown title with CSS3</h1>

<div class="dropdown-title">
  <div class="box">
    <div class="arrow"></div>
    <h2 class="title">All publishers</h2>
  </div>
  <ul>
    <li class="filter"><a href="#">John Doe</a></li>
    <li class="filter"><a href="#">Brett Boe</a></li>
    <li class="filter"><a href="#">Vince Voe</a></li>
  </ul>
</div>
/*
* Less functions
*/

.box-shadow(@arguments) {
  -webkit-box-shadow: @arguments;
  -khtml-box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -o-box-shadow: @arguments;
  box-shadow: @arguments;
}

.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -khtml-border-radius: @radius;
  -moz-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

.transition(@arguments) {
  -webkit-transition: @arguments;
  -khtml-transition: @arguments;
  -moz-transition: @arguments;
  -o-transition: @arguments;
  transition: @arguments;
}

.transform(@arguments) {
  -webkit-transform: @arguments;
  -khtml-transform: @arguments;
  -moz-transform: @arguments;
  -o-transform: @arguments;
  transform: @arguments;
}
.box-sizing(@arguments) {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.font-smoothing(@arguments) {
  -webkit-font-smoothing: @arguments;
}

body {
  background: #f0f0f0;
  font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
}

h1 {
  font-size: 32px;
  margin: 50px 50px 0;
  color: #999;
  text-shadow: 1px 2px 1px #fff;
}

.dropdown-title {
	.font-smoothing(antialiased);
  text-rendering: optimizeLegibility;
  position: relative;
  float: left;
  margin: 50px;
  .title {
  }
  .box {
    min-width: 200px;
    padding: 0 25px;
    .box-sizing(border-box);
    border: 1px solid #f0f0f0;
    .border-radius(4px);
    .transition(all .2s ease-in-out);
    cursor: pointer;
    position: relative;
    z-index: 2;
    float: left;
    .arrow {
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH3QIZFSEufwGXkwAAAOVJREFUGNNtkDFKxFAURd/zFwmkzQYGy8E+0wzhlwNBkN/YaOEOsoIsIUxvIYJgI2r61FnALw1WYQqDMNWQIjk2BoJ4mwv3nOrqdru9MMas6rp+l39irb2cpun7LIqiJ+DNWrtXVZ0FVVVr7R54DcPwWauq+ijL8nwcR1HVhziO70RE+r6/B26NMZLn+ZcC103TPBZFYYZhEFV9EREBroIgkKIoxiRJbgQQYOe9P2VZRpqmpGlKlmV470/ADpBZFGDTtu3ROYdzjrZtj8Bm5ktRgHXXdYeu6w7AeskU+PvI6rc/l+MPEHqUgY0TzZsAAAAASUVORK5CYII=');
      background-position: 0 0;
      background-repeat: no-repeat;
      display: block;
      width: 10px;
      height: 8px;
      float: left;
      margin-top: 26px;
      margin-right: 23px;
      margin-left: 0px;
      opacity: 0.5;
      .transition(opacity .2s ease-in-out);
    }
    .title {
      color: #444;
      font-size: 22px;
      line-height: 32px;
      margin: 0;
      padding: 15px 0 15px 20px;
      border-left: 1px solid #f0f0f0;
      list-style: none;
      display: block;
      float: left;
      .transition(all .2s ease-in-out);
    }
    &:hover {
      background: #f5f5f5;
      border: 1px solid #e0e0e0;
      .box-shadow(0 2px 5px rgba(0, 0, 0, 0.05));
      .arrow {
        opacity: 1;
      }
      .title {
        border-left: 1px solid #e0e0e0;
      }
    }
    &:active {
      .box-shadow(inset 0 2px 4px rgba(0, 0, 0, 0.05));
    }
  }
  ul {
    position: absolute;
    top: 60px;
    width: 100%;
    background: #fff;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    .border-radius(4px);
    .box-sizing(border-box);
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    li {
      a {
        display: block;
        padding: 10px;
        border-bottom: 1px solid #ccc;
        color: #404040;
        text-decoration: none;
        &:hover {
          background-color: #8ec63d;
          color: #fff;
        }
      }
    }
  }
  &.active {
    .box {
      background: #fff;
      border: 1px solid #ccc;
      .border-radius(3px 3px 0 0);
      .arrow {
        opacity: 1;
      }
    }
    ul {
      display: block;
      .border-radius(0 0 3px 3px);
    }
  }
}
View Compiled
jQuery(function($) {
  $('.dropdown-title .box').click(function() {
    if(!$(this).parent().hasClass('active'))
      $(this).parent().addClass('active');
    else
      $(this).parent().removeClass('active');
  });
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js