Grow your CSS skills. Land your dream job.

Menu hover states

  • # April 1, 2013 at 9:43 pm

    http://50.87.81.92/

    I’ve been working on this menu all day and I appreciate the few folks who have helped me overcome some of the frustrating hurdles I’ve come across – this forum is full of people much more talented than me.

    I haven’t tried to fix this yet, before I did I wanted to know if it was possible to do what I’m hoping to do.

    As you can see, when you hover over a menu item the button changes to a dark version of itself. My problem is that once you’re not hovering over it any longer it turns back to its original state. Duh, I know, but is there a way to keep its hover state so long as you’re hovering over one of the children in the drop down?

    Thank,
    Tanner

    # April 2, 2013 at 5:41 am

    You can’t select a parent element with CSS.

    Are you open to a JS solution?

    # April 2, 2013 at 7:39 am

    you don’t need a parent selector.
    you need to transfer the hover state from the anchor to the li – that’s what you’re still hovering over when you go down to the children

    # April 2, 2013 at 7:59 am

    Ah…Yes, of course : http://codepen.io/Paulie-D/pen/lGgya

    # April 2, 2013 at 12:07 pm

    Just having a look at this thread now guys. As always, thank you. I’ll touch base when once I’ve implemented the solution. One day I’ll be as good as @Wolfcry911 and @Paulie_D … providing all the answers to all the questions like some sort of bad ass superhero.

    INSERT INTO Tanner_Campbell (wolfcrybrain, pauliedbrain) VALUES (allthetalent, alltheawesome);

    Or something like that. Thanks guys!

    # April 2, 2013 at 12:55 pm

    @Wolfcry911 I’m having a hard time piecing together what you said with what @Paulie_D said.

    If I understand you, Wolf, you’re suggesting this:

    /*TURN THIS*/
    .nav .menu-item a {
    display:block;
    height:40px;
    width:115px;
    padding:0px;
    margin-left:6px;
    outline:none;
    text-indent:-9999px;
    background-image:url(‘http://50.87.81.92/wp-content/uploads/2013/04/menu-sprite.jpg’);
    }

    /*INTO THIS*/

    .nav .menu-item ul li {
    display:block;
    height:40px;
    width:115px;
    padding:0px;
    margin-left:6px;
    outline:none;
    text-indent:-9999px;
    background-image:url(‘http://50.87.81.92/wp-content/uploads/2013/04/menu-sprite.jpg’);
    }

    I’m certain the Codepen that Paulie shared will fix my problem but I’m unsure of how to implement it. This menu has a sprite background that is repositioned based on menu-item-x {} which is probably what’s adding to my confusion.

    # April 2, 2013 at 1:51 pm

    I’m trying everything here and coming up empty. I thought maybe

    .nav .menu-item li:hover a {}

    would work, but no.

    I don’t know how to do as you said @WolfCry911,

    > you need to transfer the hover state from the anchor to the li

    Could you clarify?

    # April 2, 2013 at 2:10 pm

    Here’s my Pen:

    http://codepen.io/TannerCampbell/pen/ilDuH

    # April 2, 2013 at 2:20 pm

    Needs some tweaking, but like this: http://codepen.io/anon/pen/Jrfvw

    # April 2, 2013 at 2:34 pm

    @TheDoc makes an appearance, solves the issue, and vanishes without a trace. The God Damn Batman of CSS.

    I don’t want to just implement this and be on my merry way. Could you explain to me WHY this works? I want to learn.

    # April 2, 2013 at 2:39 pm

    Basically, the `.sub-menu` is actually a *child* of the list item (`.menu-item`). So think of it like a div, it contains all of the elements inside of it (in this case, those elements are an sub menu `

      `, list items `
    • ` and anchors).

      When you hover over `.menu-item` I’ve made it so it’s sub menu (child) appears. When you’re going through its child elements and hovering the nav items that it contains, you’re still technically hovering that main `.menu-item` list item because it is the *container* for all of the things inside of it.

      I think that makes sense?

      > @TheDoc makes an appearance, solves the issue, and vanishes without a trace*. The God Damn Batman of CSS.

      That made my day haha.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".