Jquery Drop Down Menu

Jquery Drop Down Menu Web-development (jquery),web-development (PHP) Jquery Drop Down Menu jQuery drop down menu

<style type="text/css">
 #navigation {
 font-family: georgia!important;
 font-size: 18px!important;
 padding: 0px;
 margin: 0px;
 list-style-type: none;
 }
 #navigation li {
 position: relative;
 float: left;
 margin: 0px 1px 0px 0px;
 }
 #navigation li a {
 display: block;
 padding: 5px 35px;

 background: #cc0000;
 color: #ffffff;
 text-decoration: none;
 }

 #navigation li ul {
 position: absolute;
 left: 0px;
 top: 0px;
 display: none;
 padding: 0px;
 margin: 0px;
 list-style-type: none;
 }

 #navigation li.over {
 top: 1px;
 }

 #navigation li.over ul {
 padding: 0px!important;
 display: block;
 background: #009bcc;

 }
 #navigation li.over ul li {
 float: none;
 margin: 0px!important;
 top: 0px;
 }
 #navigation li.over ul li a {
 font-size: 14px!important;
 white-space: nowrap;
 }
 #navigation li.over ul li a:hover {
 background: #00bbf7;
 color: #000000;

 }
 </style>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 <script type="text/javascript">
 (function($){
 $.fn.extend({
 dropmenu: function(options) {
 return this.each(function() {
 var obj = $(this);
 $("li ul", obj).each(function(i) {
 $(this).css('top', $(this).parent().outerHeight());
 })

 $("li", obj).hover(
 function () { $(this).addClass('over'); },
 function () { $(this).removeClass('over'); }
 );

 });
 }
 });
 })(jQuery);
 $(document).ready(function() {
 $('#navigation').dropmenu();
 });
 </script>
 <h1>jQuery drop down menu</h1>
 <ul>
 <li><a href="">Programming</a>
 <ul>
 <li><a href="">PHP Programming</a></li>
 <li><a href="">JavaScript Programming</a></li>
 </ul>
 </li>
 </ul>

Posted by Hodie J