How To Design Drop Down Menu of A WordPress Theme?

September 21st, 2016 | by Ravi Chahar || 6 Comments |

As we all know that the drop down menu is one of the hardest parts of the WordPress theme to design. It would require expertise to design drop down menu for WordPress website.

You can create navigation menu and drop down menu using the WordPress CMS. But what would you do if your theme doesn’t show the drop down menu perfectly?

When you add the sub-menu items and find out that your theme doesn’t support it. I am going to provide the solution.

If you are developing a WordPress theme then you would in need to know how to design drop down menu.

Let Me Provide The Guide To Design Drop Down Menu For Your WordPress Theme.

The designing is done by the CSS language. You don’t need to add any extra language to make to complicated. When you create navigation menu in WordPress theme and add the sub-menu items using WordPress then the HTML structure would be there.

It would consist the unordered list of the menu items and another unordered list of the sub-menu items. To design navigation menu, you have to target the first <ul>.

But here we are talking about the drop down menu so the main focus is the second <ul>.

Let me begin the designing.

Step 1:- After adding the sub-menu items, you would see that all the items are showing along with the menu items. You have to hide the items of the drop down menu.

It would disappear all the sub-menu items from the list. Here the class is given to the navigation menu. We are using “nav-menu” as the menu class so that CSS properties can be used. It’s the target element.

Step 2:- The drop down menu is hidden. For the perfect design, you should add the code which would show the menu items only if you hover the menu items.

It means the sub-menu items should see only if you take the cursor on the menu item.

This code would reverse the above code. After adding this code, you would see the drop down menu items only when you take the cursor.

Step 3:- If you remember then while creating the horizontal navigation menu, the menu items are floated. So this property would be inherited to the drop down menu items.

You have to remove the float of the sub-items so that you don’t see any space on the left-hand side of the items. Target the second unordered list items.

This code will help you to fix all the space issues of the drop down menu items. Now the item would appear only when you hover over the menu items.

Now you have to design drop down menu using the background-color and the borders.

I am going to show you an example here.

Step 4:- I am going to target the links of the sub-menu items to design it display when anyone take the cursor over theme. I am going to choose the background color, the width of the items and more.

The output would be a translucent drop-down menu with the clean and elegant design. Let me show you.

If you want to change the background color of the sub-menu items then you can. Always remember that you have to target the second unordered list.

To show the perfect hover effect, you have to use your mind to understand the concept. You have to target the second <ul> items when you hover the first unordered list of the navigation menu items.

“menu unordered list list:hover second unordered list list link:hover”

If you got this point then you can now design drop menu of WordPress theme. There is nothing much to get confused. Just use your mind to target the drop down menu items and links.

Would You Like To Design Drop Down Menu For Your Website?

You all know that the design of your website matters a lot. You should have a perfect design ready website to attract your readers.

When you have more content on your website with multiple topics then you have to create the drop down menu. Most of the people face the problem in its designing.

If you follow the above-mentioned steps then you will able to design an amazing drop down for your WordPress theme. If you still face any problem then feel free to ask.