Page Widget How to - Create Dropdown menu with fade in

Question

We would like to know how to create Dropdown menu with fade in.
Answer


<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<style>
#menu ul ul {<!--from  ww w.  j  a  va  2  s .  com-->
  display: none
}

#menu ul ul li {
  display: none
}

ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

#menu ul {
  border: 1px solid #000;
  float: left;
}

#menu ul li {
  width: 150px;
  height: 30px;
  background: #EEE;
  cursor: pointer;
  float: left;
  text-align: center;
  line-height: 30px;
  border-right: 1px solid #000;
}

#menu ul li:last-child {
  border: 0px
}

#menu ul ul li {
  width: 150px;
  height: 30px;
  background: #AAA;
  cursor: pointer;
  float: left;
  text-align: center;
  line-height: 30px;
  border-right: 1px solid #000;
}
</style>
</head>
<body>
  <div id="menu">
    <ul>
      <li>Menu 1
        <ul>
          <li>1</li>
          <li>1</li>
        </ul>
      </li>
      <li>Menu 2
        <ul>
          <li>2</li>
          <li>2</li>
        </ul>
      </li>
      <li>Menu 3
        <ul>
          <li>3</li>
          <li>3</li>
        </ul>
      </li>
    </ul>
  </div>
  <script>
$(function() {
$('#menu ul li').on('mouseenter',function(){
    $(this).children('ul').children('li').each(function(i){
      $('#menu ul ul').show();
      $(this).delay(100*i).fadeIn(200);
    });
  });
  $('#menu ul li').on('mouseleave',function(){
  $(this).children('ul').children('li').each(function(i){
      $(this).delay(100*i).fadeOut(200);
        $('#menu ul ul').hide();
    });
  });
});
</script>
</body>
</html>
The code above is rendered as follows: