How to made more than one level navigation dropdown menu

HTML & CSS
1

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.

Thanks

2

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

3

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

Thanks

4

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

5

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.

http://codepen.io/ChrisofArabia/pen/oXNZgv

6

@chrisofarabia

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.

7

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

8

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: .

9

Use this to fix the gap.

nav ul{display:table}
10

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:

11

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