jQuery CSS Расширяемое меню

<ul id="expmenu-freebie">
  <li>
  <ul class="expmenu">
  <li>
  <div class="header">
  <span class="label" style="background-image: url(images/messages.png);">Сообщения</span>
  <span class="arrow up"></span>
  </div>
  <ul class="menu">
  <li>Настройки уведомлений</li>
  <li class="selected">Email уведемления</li>
  <li>Настройки конфиденциальности</li>
  </ul>
  </li>
  <li>
  <div class="header">
  <span class="label" style="background-image: url(images/user.png);">Управление</span>
  <span class="arrow up"></span>
  </div>
  <ul class="menu">
  <li><input type="range" name="range" min="0" max="100" value="35" style="width: 100%;" /></li>
  </ul>
  </li>
  <li>
  <div class="header">
  <span class="label" style="background-image: url(images/pc.png);">Настройки экрана</span>
  <span class="arrow down"></span>
  </div>
  <ul class="menu" style="display:none">
  <li>Ваши настройки</li>
  </ul>
  </li>
  <li>
  <div class="header">
  <span class="label" style="background-image: url(images/search.png);">Поиск</span>
  </div>
  </li>
  </ul>
  </li>
  </ul>

* { font-family: "museo500", "Arial"; font-size: 12px; list-style: none; margin: 0; padding: 0; outline: 0; text-decoration: none; box-sizing: border-box !important; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; -ms-box-sizing: border-box !important; }

  @font-face{  
  font-family: 'museo500';
  src: url('../fonts/MuseoSans_500-webfont.eot');
  src: url('../fonts/MuseoSans_500-webfont.eot?#iefix') format('embedded-opentype'),
  url('../fonts/MuseoSans_500-webfont.woff') format('woff'),
  url('../fonts/MuseoSans_500-webfont.ttf') format('truetype'),
  url('../fonts/MuseoSans_500-webfont.svg#museo_sans_500regular') format('svg');
  font-weight: normal;
  font-style: normal;
  }

ul.expmenu { width: 200px; }
  ul.expmenu * { list-style: none; }
  ul.expmenu > li > div.header { padding: 12px; border-bottom: 1px #396e9f solid; }
  ul.expmenu > li:last-child > div.header { border-bottom: none; }
  ul.expmenu > li ul li { background-color: #ececec; padding: 12px; border-bottom: 1px solid #dcdcdc; border-top: 1px solid #fff; color: #727272; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); }
  ul.expmenu > li ul li:last-child { border-bottom: none; }
  ul.expmenu > li ul li.selected { background-color: #f4f4f4; }
  ul.expmenu div.header
  {
  color: #203f61;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2);

  background: #4d7fb8;
  background: -moz-linear-gradient(top, #4d7fb8 0%, #4572a5 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d7fb8), color-stop(100%,#4572a5));  
  background: -webkit-linear-gradient(top, #4d7fb8 0%,#4572a5 100%);
  background: -o-linear-gradient(top, #4d7fb8 0%,#4572a5 100%);
  background: -ms-linear-gradient(top, #4d7fb8 0%,#4572a5 100%);
  background: linear-gradient(to bottom, #4d7fb8 0%,#4572a5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d7fb8', endColorstr='#4572a5',GradientType=0 );
  }
  ul.expmenu > li > div.header > .label { padding-left: 24px; background: no-repeat; }
  ul.expmenu > li > div.header > .arrow { display: block; width: 16px; height: 16px; background: no-repeat center; float: right; }
  ul.expmenu > li > div.header > .arrow.up { background-image: url(../images/arrow_u.png); }
  ul.expmenu > li > div.header > .arrow.down { background-image: url(../images/arrow_d.png); }

  ul.expmenu div.header:hover
  {
  background: #4571a0;
  background: -moz-linear-gradient(top, #4d7fb8 0%, #4571a0 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d7fb8), color-stop(100%,#4571a0));
  background: -webkit-linear-gradient(top, #4d7fb8 0%,#4571a0 100%);
  background: -o-linear-gradient(top, #4d7fb8 0%,#4571a0 100%);
  background: -ms-linear-gradient(top, #4d7fb8 0%,#4571a0 100%);
  background: linear-gradient(to bottom, #4d7fb8 0%,#4571a0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d7fb8', endColorstr='#4571a0',GradientType=0 );

  cursor: pointer;
  }

  ul.expmenu > li ul li:not(.selected):hover
  {
  background: #e7e7e7;
  cursor: pointer;
  }
  ul.expmenu > li ul li:not(.selected):active
  {
  background: #f1f1f1;
  cursor: pointer;
  }

.slider
{
  background: #d5d5d5;
  height: 7px;
  position: relative;
  cursor: pointer;
  width: 100%;
  clear: right;
  top: 0px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-box-shadow: inset 0 0 8px #000;
  margin: 10px 0 10px 0;
}

/* progress bar (enabled with progress: true) */
.progress
{
  height: 7px;
  position: relative;
  background: #5389c5;
  background: -moz-linear-gradient(top, #5389c5 0%, #4775a9 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5389c5), color-stop(100%,#4775a9));
  background: -webkit-linear-gradient(top, #5389c5 0%,#4775a9 100%);
  background: -o-linear-gradient(top, #5389c5 0%,#4775a9 100%);
  background: -ms-linear-gradient(top, #5389c5 0%,#4775a9 100%);
  background: linear-gradient(to bottom, #5389c5 0%,#4775a9 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5389c5', endColorstr='#4775a9',GradientType=0 );
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  top: 0px;
  border: 1px solid #4b7bb1;

  -moz-box-shadow: inset 0 .7px 0 0 rgba(255, 255, 255, 0.3);
  -webkit-box-shadow: inset 0 .7px 0 0 rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 .7px 0 0 rgba(255, 255, 255, 0.3);
}

.handle
{
  background: url(../images/handle.png) repeat-x center;
  height: 16px;
  width: 16px;
  top: -5px;
  position: absolute;
  display: block;
  margin-top: 1px;
  cursor: pointer;

}

.range
{
  display: none;
}

<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>

$(document).ready(function(){
  $(":range").rangeinput({progress: true});
  $("ul.expmenu li > div.header").click(function()
  {
  var arrow = $(this).find("span.arrow");

  if(arrow.hasClass("up"))
  {
  arrow.removeClass("up");
  arrow.addClass("down");
  }
  else if(arrow.hasClass("down"))
  {
  arrow.removeClass("down");
  arrow.addClass("up");
  }

  $(this).parent().find("ul.menu").slideToggle();
  });
  });