jQuery Page Widget How to - Hover to show the two column menu

Question

We would like to know how to hover to show the two column menu.
Answer


<!--from  w ww  .java2s . c o  m-->
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.7.1.js'></script>
<style type='text/css'>
.dropdown {
  text-indent: 15px;
  padding-right: 15px;
  vertical-align: middle;
  display: inline-block;
}

.dropdown:hover {
  background-color: #EEE;
}

.dropdown li ul {
  display: none;
  border: black 1px solid;
  position: absolute;
  background-color: white;
  width: 150px;
}

.dropdown ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.dropdown a {
  display: block;
  padding-right: 15px;
  line-height: 30px;
}

.dropdown a:hover {
  color: #AAA;
  text-decoration: underline;
}

.dropdown li:hover {
  background-color: #CCC;
}

.second {
  left: 150px;
}
</style>
<script type='text/javascript'>
$(function(){
    $('.dropdown li').hover(function () {
            var li = $(this).closest('li');
            li.find(' > ul').slideToggle(160);
    }); 
});
</script>
</head>
<body>
  <div class="dropdown">
    <ul>
      <li>Hover to see the details
        <ul class="first">
          <li><a href="#">List</a></li>
          <li><a href="#">Movie</a></li>
          <li><a href="#">Company</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Product</a></li>
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
        </ul>
        <ul class="second">
          <li><a href="#">Oracle</a></li>
          <li><a href="#">Java</a></li>
          <li><a href="#">Javacript</a></li>
          <li><a href="#">XML</a></li>
          <li><a href="#">XLAT</a></li>
          <li><a href="#">XPATH</a></li>
          <li><a href="#">C</a></li>
        </ul>
      </li>
    </ul>
  </div>
</body>
</html>
The code above is rendered as follows: