How To Design Drop Down Menu of A WordPress Theme?

design drop down menu

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.

.nav-menu ul ul {

     position: absolute;

     left: -9999px;

}

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.

.nav-menu ul li:hover ul {

      left: auto;

}

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.

.nav-menu ul li ul li {

      float: none;

}

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.

.nav-menu ul li:hover ul li a {
     color: white;
     background-color: #2b2727;
     width: 130px;
     text-align: center;
     opacity: 0.8;
     border: none;
     padding-top: 2px;
     padding-bottom: 2px;
}
.nav-menu ul li:hover ul li a:hover {
    background-color: #2b2727;
    opacity: 1.0;
}

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

how to design drop down menu

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.

by Ravi Chahar

A WordPress Professional and a LinkedIn influencer. A coder by passion and a blogger by choice. WordPress theme development is what he can rock with. He is your WordPress guy who will teach you how to solve WordPress errors, WordPress security issues, theme development, design issues and what not.

6 comments

  1. Wow Ravi,

    You never cease to amaze me with your knowledge. You take one technical aspect and make it so easy to understand, especially for the non techie like me.

    As I was reading along, all I could think of was if Ravi put a few of his blog posts together, it would make a great ebook! Just say’n….

    -Donna

    1. Hey Donna,

      It’s always good to hear from you. 🙂

      I just try to provide an easy guide for the people who are afraid of doing the techie things. The theme development seems to be so hard but if you understand it then nothing is difficult.
      The theme development requires many blog posts and I am trying to provide all of them. I will create an ebook to provide the full guide about developing a theme.
      Thanks for believing in me.:)
      ~Ravi

  2. Yikes Ravi, coding! LOL….I am scared of coding 😉 Phil got my theme right where I want it so I never touch code. BUT….you teach coding in such a simple, easy to follow way I can see myself adding a drop down menu solo. I went to tech school for programming but WAY back in 2001. Basic HTML with some bells and whistles here and there. Thanks for the cool share 🙂

    1. Hey Ryan,

      I used to feel the same way. But yoou know that the time is key and we learn a lot. I have embraced my skills to learn WordPress codes and the designing. It’s always good to have a tech guy around you for your blog. I am sure, Phil would be doing a great job.
      The way I have mentioned above can be followed by anyone to give different design to a drop down menu.
      Thanks for sharing your thoughts.
      Have a great weekend.
      ~Ravi

  3. Wow, Ravi,

    You really know all about design! I so appreciate all of the instructions and examples you give here on your blog.

    I agree 150% with Donna, an eBook would do very well, add to your credibility, and advance your popularity. Not that people don’t appreciate you already!

    I am just in awe about your expertise in design. I certainly know who to contact when I have a challenge with WordPress!

    Thank you for giving so much value!

    Deborah

    1. Hi Deborah,

      It’s always good the comments about my work.:)

      We all know that the designing of the theme matters a lot. You should always carry a WordPress theme which is easy to look on. People want the clean design so that they can read your content easily.

      I have experienced that designing a drop down menu isn’t so easy. It’s important to know each and every aspect. I just tried to provide the easiest way to complete the task. Hope that helps.

      Thanks for appreciating.
      Enjoy the weekend.
      ~Ravi

Leave a Reply

Your email address will not be published. Required fields are marked *