<div id="main">
  <ul class="nyMenu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Tutorials</a>
        <a href="#">PHP</a>
        <a href="#">jQuery</a>
        <a href="#">Cloud Computing</a>
    <li><a href="#">Applications</a>
        <a href="#">PHP Secure Login</a>
        <a href="#">Sizzling jQuery</a>
        <a href="#">Cooling Processor</a>
        <a href="#">Jet Mail</a>


Here we will be using our Cross-browser Reset CSS

body{font:400 13px Arial,Helvetica}
#main{margin:0 auto; width:1000px;}
/* nyMenu */
ul.nyMenu{border-top:1px solid #eee; float:left}
.nyMenu li{display:inline-block;position:relative;z-index:500;float:left}
.nyMenu li a {display:block; padding:9px 8px; text-decoration: none; color:#06b; font-size: 13px;}
.nyMenu li .hov{background:#eee;z-index: 499; position: relative}
.nyMenu li a.selected, .nyMenu li p a:hover{background-color:#069; color:#fff;}
.nyMenu li p {position:absolute; left:0; display:none; background:#eee; padding: 5px; z-index: 498;}
.nyMenu li p a {white-space:nowrap; padding:4px 8px;}
/* nyMenu ends */

The Javascript

var j = jQuery.noConflict();
j(function() {
  j('.nyMenu li').hover(
    function () {
      j('p', this).show();
    function () {
      j('p', this).hide();

Javascript with slide effect

var j = jQuery.noConflict();
j(function() {
  j('.nyMenu li:has(p)').find('a:first').append(' ∨ ');
  j('.nyMenu li').hover(function() {
    j('p', this).slideDown('fast').show();
    j('a', this).addClass('hov');
  }, function () {
    j('p', this).slideUp('fast');
    j('a', this).removeClass('hov');

Your drop down menu will look same as above example in FF, IE7, IE8, IE9, Chrome, Safari, Opera.

Would like to know what is Cross-browser Reset CSS ?

You might also like: