كود قائمة منسدلة بشكلها الإحترافي

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script src='https://cnmu.googlecode.com/svn/trunk/2014/vmenu.js' type='text/javascript'></script>
<style>
.cnmuvrmenu {
  list-style: none outside none;
  margin: 0 auto;
  padding: 0;
  width: 300px;
}
.button a {
  background: url("https://lh6.googleusercontent.com/-taGhCUDRGUk/U_8HFbwtw7I/AAAAAAAAEko/J_KWIOVPWW0/s16/cnmuarrow.png") no-repeat scroll 4px center #3F3F3F;
  border-radius: 3px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
  padding: 5px 8px 6px 2px;
}
.menu li {
  color: #555;
  font-size: 14px;
  list-style: none outside none;
}
.cnmuvmdrop li {
  background: #f1f1f1;
  border: 1px solid #bbb;
  color: #888;
  margin: 5px 0;
  padding: 4px 10px;
  transition: all 0.7s ease 0s;
}
.cnmuvmdrop li:hover {
  background:  #e7f3fc;
  border: 1px solid #7dc2f3;
}
.cnmuvmdrop a {
  color: #000;
  display: inline !important;
}
.cnmuvrmenu a {display: block; text-decoration: none; transition: all 0.7s ease 0s;}
.menu ul {margin: 0; padding: 0; width: 100%;}
.cnmuvmdrop li a:hover {text-decoration:none;}
.cnmuvmdrop{display:none;}
</style>
<ul class="cnmuvrmenu">
<!--------1-------->
<li class="menu">
<ul>
<li class="button"><a href="#" >القائمة الاولى</a></li>            
<li class="cnmuvmdrop">
<ul>
<li>1. <a href="#">تعديل القائمة الأولى</a></li>
<li>2. <a href="#">تعديل القائمة الأولى</a></li>
<li>3. <a href="#">تعديل القائمة الأولى</a></li>
</ul>
</li>
</ul>
</li>
<!--------2-------->
<li class="menu">
<ul>
<li class="button"><a href="#" >القائمة الثانية</a></li>            
<li class="cnmuvmdrop">
<ul>
<li>1. <a href="#">تعديل القائمة الثانية</a></li>
<li>2. <a href="#">تعديل القائمة الثانية</a></li>
<li>3. <a href="#">تعديل القائمة الثانية</a></li>
<li>4. <a href="#">تعديل القائمة الثانية</a></li>
<li>5. <a href="#">تعديل القائمة الثانية</a></li>
</ul>
</li>
</ul>
</li>
</ul>