CSS 下拉菜单悬停答案

【问题标题】：CSS Drop down menu HoverCSS 下拉菜单悬停
【发布时间】：2013-01-19 18:22:46
【问题描述】：

我需要帮助。我正在做一个带有共享图标的下拉菜单。我的问题是：我希望当我将鼠标移到页脚中的主共享图标上而不是去选择另一个图标（如 facebook）时，主图标仍然像鼠标悬停一样被选中，但它没有t 有效。

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

我认为问题在于元素 li 和 a 是两个独立的标签。

观看此图片以更好地理解它我在说什么（因为我无法更好地解释它._.）

http://db.tt/Kujz3Pv4

代码如下： http://jsfiddle.net/zPavan/KHWJ4/2/

如果代码有什么问题或者有什么建议，多谢指教！

【问题讨论】：

+1 格式正确的问题！从this answer 看到this fiddle。

标签： css drop-down-menu menu

【解决方案1】：

我认为这样做可以：

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

【讨论】：

【解决方案2】：

不要专门依赖<a>的悬停，而是让它依赖于包含整个<ul>的列表项：

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

我建议为特定的 li 提供一个类似 .share 的类，您也可以使用它。

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

【讨论】：