WordPress DropDown Menu CSS

Question

I'm developing a custom theme for WordPress.

I developed the basic skeleton of the theme using Ian Stewart's:
How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial

And developed the menu CSS using:
Create a multilevel Dropdown menu with CSS and improve it via jQuery

Both of them are nice and complete.

When I tried registering custom menu to the theme, the CSS isn't functioning for me in the sub menus. To register custom menu, I used the following code into header.php:

<?php wp_nav_menu ( array ( 'theme_location'=>'primary', 'fallback_cb'=>'') ); ?>

It's functioning for me, and showing my custom menu where I designated to. But using the custom CSS, the dropdown menus (submenus) are not showing. I used z-index for the subsequent menus, but till they are hidden.

Please note that: the wp_nav_menu() is creating a tag like:

<ul id="menu-new-custom-menu" class="menu">

So, I in my CSS I replaced all #nav with .menu. But till the submenus are not visible.

Please assist me to figure out the bug of my whole bunch of coding.
P.S.: I'm using WP 3.4.2 with no plugin in relation to the menu. My CSS is exactly the same as the tutorial's, except the .menu.

Answer 1

Ok, I got the solution at last.
It's not the jQuery issue, jQuery was to animate the menu only. I found a wrong attribute in CSS, in nano.css:

#access{
    background-color: #333;
    height: 25px;
    font-size:16px;
    text-transform:uppercase;
    overflow:hidden;
    }

will be

#access{
    background-color: #333;
    height: 25px;
    font-size:16px;
    text-transform:uppercase;
    }

The overflow:hidden was hiding the sub-menus.

Additionally I added z-index to:

.menu li:hover ul, .menu li li:hover ul, .menu li li li:hover ul, .menu li li li li:hover ul{
display:block;
position:absolute;
z-index:5000;
}

for the sub-menus. Now it's working fine here.
Thanks to Amit Chowdhury, for his assistance through the bug-fixing.

Answer 2

Perhaps this must be your jquery issue? I checked your css and i didnt see anything wrong on it but when I check your header.php there is no jquery library and jquery custom code embedded on it.

Did you put a jquery library before your jquery codes? See below, put this in your header.php in your head tag.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
  function mainmenu(){
      $(" .menu ul ").css({display: "none"}); // Opera Fix
      $(" .menu li").hover(function(){
      $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
    },function(){
    $(this).find('ul:first').css({visibility: "hidden"});
    });
 }



 $(document).ready(function(){                  
mainmenu();
 });
</script>