CSS Drop down menu Hover

Question

I need a help. I was doing a drop up menu with share icons. My problem is this: I'd like that when I pass the mouse over the main-share icon in the footer and than go to select another icon (like facebook), the main icon remains selected like as mouse hover, but it don’t works.

<div class="footer large blue">Footer Blue
<div class="pull-right buttons">
    <ul>
        <li><a class="btn2 large share2 blue" href="#">Share</a>

            <ul>
                <li><a class="btn large rss" href="#">RSS</a>

                </li>
                <li><a class="btn large twitter" href="#">Twitter</a>

                </li>
                <li><a class="btn large plus" href="#">G+</a>

                </li>
                <li><a class="btn large facebook" href="#">Fb</a>

                </li>
            </ul>
        </li>
        <li><a class="btn2 large btt blue" href="#">Back to Top</a>

        </li>
    </ul>
</div>

I think the problem is that the elements li and a, are two independent tags.

Watch this image to understand it better what am i saying (because i’m not able to explain it better ._.)

http://db.tt/Kujz3Pv4

Here's the code: http://jsfiddle.net/zPavan/KHWJ4/2/

If there are any problems or have suggestions on the code, I thank you for the advice!

+1 Well formed question! See this fiddle from this answer.

NGLN
– NGLN

2013-02-04 22:49:47 +00:00
Commented Feb 4, 2013 at 22:49 — NGLN
– NGLN, Commented Feb 4, 2013 at 22:49

Explosion Pills · Accepted Answer · 2013-02-04 22:49:16Z

4

Instead of depending on the hovering of the <a> specifically, make it depend on the list item that contains the entire <ul>:

li:hover > .btn2.blue {
    background-color: hsl(197, 59%, 30%);
}

I would suggest giving that specific li a class like .share that you can use as well.

http://jsfiddle.net/ExplosionPIlls/KHWJ4/3/

answered Feb 4, 2013 at 22:49

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Diodeus - James MacFarlane · Accepted Answer · 2013-02-04 22:51:19Z

0

I think this will do it:

.buttons ul li:hover > a {
    background-color: #1f5f79;
}

answered Feb 4, 2013 at 22:51

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Collectives™ on Stack Overflow

CSS Drop down menu Hover

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related