Nested menu issues (CSS help needed)

  • Author
  • #1947169


    Hello everyone, I’m having a bit of a problem with my sidebar menu on

    After I switched to the Fictive theme, submenu items appeared all the time. While I have fixed this, and gotten it to the point you’ll see now, the other issue is here. When you hover over a menu item, such as “About,” rather than the submenu items unfolding to the right, they are simply added to the menu.

    I used to use Confit (I believe), and the menus worked how I wanted there. My explanation probably sucked, so hopefully that will at least help clarify what I mean.

    The blog I need help with is



    Hi there,

    To get your submenu items to unfold to the right, you can try adding CSS like this:

    .main-navigation ul ul {
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 99999;
    background: inherit;
    width: 200px;

    That CSS is similar to the CSS used in the Confit theme to have the submenus open to the right, instead of having them open underneath the parent menu item.

    Please let me know how that goes for you! :)



    Hmm, that helped to unfold them to the right, but they’re still expanding the menu rather than branching out from the main topic. When I hover over “About,” the “About the Blog” should be directly next to where I’m hovering, and that empty space shouldn’t be there below the main topic.

    In addition, it seems that the little dots from the post tags come through the background of the menu. Is there a way to fix that too?

    Here’s a picture of how it looks now with this new code:



    Wait, never mind. I changed .main-navigation to nav before realizing I had an issue with unclosed brackets, so it does unfold to the right properly now. However, the dot bleed-through is still there. Is there a way to prevent this?



    As a semi-solution, I just removed the tags from the home page, so that’s adequate for me. Thanks for the help!



    Ok, I’m glad you found a solution that works for you! :) I was looking into that dot issue and it looks like a pretty tricky issue to fix with CSS, so if you’re ok with removing the tags from the home page that’s probably the most straightforward solution.

The topic ‘Nested menu issues (CSS help needed)’ is closed to new replies.