Simple dropdown menu in Wordpress

Can someone please help me with my menu in Wordpress.

I just want a basic menu with dropdowns, I’m part way there but when I roll over the ‘inspiration’ menu item it pulls the following menu items beneath the dropdown.

I believe this is the relevant css: {
    margin: 0 25%;
    border: 1px solid red;
} li {display: inline;} {
    width: 60%;
//My main-navigation
nav#main-navigation ul li {display: inline;padding: 10px;}
nav#main-navigation li ul {display: none;}
nav#main-navigation ul li:hover > ul {display: block;}
nav#main-navigation ul li a {background: red; padding: 10px;}
/*nav#main-navigation ul li a:visited {color: green;}
*/nav#main-navigation ul li a:hover {color: orange;}
nav#main-navigation ul li a:active {color: yellow;}
#main-navigation li ul li a {background: #fff;}

I’m stumped!

Any help appreciated

Hi @Argent,

I think you want to look at the first dropdown example here:

That is very similar to what you have. You seem to have omitted the positioning of the sublist and its parent list item.

Please post and tell if that works on your menu too.

1 Like

Yes, it was the positioning.
I can’t thank you enough! I spent hours on this problem and you solved it in two lines of code.
Cheers! :grinning:

1 Like

I’m stuck! how do I get the the second level menus to fall under one another?

You could try change the submenu items to block display. E.g:

#main-menu-menu .submenu li{
  display:b lock;

That was it Erik, thanks again.
The immediate child selector ‘>’ was the key.

nav#main-navigation .sub-menu > li {display: block;}
1 Like

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