html - 悬停时下拉菜单 CSS3

Question

目前我<span>Home<span>正在anchor使用li. 但是，我需要一个悬停下拉菜单。就像同一个家span，但在它下面还有两三个物品。任何帮助，将不胜感激。点击获取jsFiddle

！

Answer 1

你应该看看使用图标字体而不是图片，如果你使用很多这样的图像，整个网站会变得更小，并且效率更高，现在为你制作一个 jsfiddle。

Answer 2

如果您使用<ul>and<li>而不是使用<span>. 就像 Parallel 2ne 所说的，这取决于您的 html 标记。<span>但是，您也可以通过 Javascript/jQuery 创建一个在单独悬停元素时自动触发的函数来强制它。当它触发时，它适用display:block于display:hidden子<span>元素。

Answer 3

您可以在 css 和 html 上执行此操作，无需任何 js 文件。您需要的 HTML 代码：

<ul>
<li>
    <span>Menu 1</span>
    <div class="sub-menu">
        <ul>
            <li>sub1</li>
            <li>sub2</li>
        </ul>
    </div>
</li>
<li>
    <span>Menu 2</span>
</li>

这是您必须附加的 CSS：

li .sub-menu {
    visibility:hidden;
    opacity:0;
    /*and more custom CSS as you need*/
}
li:hover .sub-menu {
    visibility:visible;
    opacity:1;
}

您可以使用过渡来为您的效果设置动画。