How to made more than one level navigation dropdown menu

Hi there

This is my JSfiddle

What I am trying to do is when a User Hover to Search Option then there should be two options to search for Past and Current.Now what is happening although I have pasted code in separate <ul> elements but it is embedded in top level menu with main menu.I want them to be in sub-menu.


I left comments. Basically your dropdowns are targeting all levels of dropdowns. You need to specify specific levels.

Thanks RyanResse

I was not getting notification of this post.

Can you delete my latest post which is related on this topic

Now its working fine


@TechnoBear took care of that. Please see the other thread.

Here’s the one I promised in the other thread. There’s a little quirk in that the white gap shouldn’t appear between the top level menu items, but it seems to be working OK otherwise.


The space there is due to the white-space nodes that inline-block creates. Eliminate any space between </li> and the next <li> (in the HTML) for the top level LIs and you will see that go away.

OK. I can see that working. I’ll leave it as is for now to keep the readability/nesting in place.

You could also place a -2px margin (left/right) on the LIs. to cover up the space if you’re just worried about readability.

Just offering suggestions :slight_smile: .

Use this to fix the gap.

nav ul{display:table}

OK, that works across at Codepen. I’m not sure whether it’s reflected above, or at least it’s not showing for me.

Thanks all for the help. :smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.