Nested menu issues (CSS help needed)

  • Author
    Posts
  • #1947169

    kyoycz
    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 thegarbagemanreviews.wordpress.com.

    #1947426

    rachelmcr
    Staff

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

    #1947427

    kyoycz
    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

    #1947428

    kyoycz
    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?

    #1947460

    kyoycz
    Member

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

    #1947474

    rachelmcr
    Staff

    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.