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.