Menu

by LRN

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<ul class="main-menu">
  <li>
    <a href="#">Главная</a>
  </li>
  <li>
    <a href="#">Вторая</a>
    <span></span>
    <ul>
      <li>
        <a href="#">1</a>
      </li>
      <li>
        <a href="#">2</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Третья</a>
    <span></span>
    <ul>
      <li>
        <a href="#">1</a>
      </li>
      <li>
        <a href="#">2</a>
      </li>
    </ul>
  </li>
</ul>

CSS

body {
  height: 100%;
  background: #fff;
  font: 300 15px/21px Arial, Helvetica, Arial, sans-serif;
  overflow-y: scroll
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
ul.main-menu {
  background: #ccc;
  display: block;
  margin: 2rem 0;
  padding: 2rem;
}

ul.main-menu li {
  display: inline-block;
  list-style: none;
  padding: 0 2rem;
  border: medium none;
  vertical-align: top;
}

ul.main-menu li a::after {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
}

ul.main-menu li a::after {
  background-color: transparent;
  height: 2px;
  right: 0;
}

ul.main-menu li span {
  background: rgba(0, 0, 0, 0) url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTIgNyIgd2lkdGg9IjgiIGhlaWdodD0iNSI+PHN0eWxlPi5zdDB7ZmlsbDojYWFhYWFifTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTEyIDJWMGgtMUw2IDQgMSAwSDB2Mmw1LjkgNUg2eiIvPjwvc3ZnPg==") no-repeat scroll 50% 50%;
  display: inline-block;
  height: 28px;
  margin-left: 10px;
  margin-right: -10px;
  padding: 0;
  position: relative;
  right: 0;
  top: -2px;
  transition: background-color 0.2s ease-out 0s;
  vertical-align: middle;
  width: 28px;
}

ul.main-menu li span:hover {
  background-color: #fff;
  background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTIgNyIgd2lkdGg9IjgiIGhlaWdodD0iNSI+PHN0eWxlPi5zdDB7ZmlsbDojM2MyZjEyfTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTEyIDJWMGgtMUw2IDQgMSAwSDB2Mmw1LjkgNUg2eiIvPjwvc3ZnPg==");
  cursor: pointer;
}

ul.main-menu li span::before {
  background: #aaaaab none repeat scroll 0 0;
  content: "";
  height: 10px;
  left: 0;
  position: absolute;
  top: 10px;
  width: 1px;
}

ul.main-menu li span:hover::before {
  background: #fff;
  transition: background-color 0.2s ease-out 0s;
}

ul.main-menu li span.active {
  background-image:...

JavaScript

$(document).ready(function() {
  $('ul.main-menu li span').click(function() {
    $('ul.main-menu li ul').slideUp();
    if ($(this).next().is(":visible")) {
      $(this).next().slideUp();
    } else {
      $(this).next().slideToggle();
    }
    return false;
  });
  $('.main-menu > li > span').click(function() {
    $('.main-menu > li > span').removeClass('active');
    $(this).addClass('active');
  });
});