Nested menu issues (CSS help needed)

  • Unknown's avatar
    davidcb9866 · Member ·

    Hello everyone, I’m having a bit of a problem with my sidebar menu on http://thegarbagemanreviews.wordpress.com/

    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: (visible only to logged in users)

  • Unknown's avatar
    rachelmcr · Member ·

    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! :)

  • Unknown's avatar
    davidcb9866 · Member ·

    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: http://i.imgur.com/k1LVqhj.png

  • Unknown's avatar
    davidcb9866 · Member ·

    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?

  • Unknown's avatar
    davidcb9866 · Member ·

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

  • Unknown's avatar
    rachelmcr · Member ·

    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.