在Hover上下拉菜单CSS3

Question

目前，我在<span>Home<span>内悬停anchor元素时使用li。但是，我需要在悬停时下拉。类似于同一个房屋span，但下面还有两三个房屋。任何帮助，将不胜感激。点击jsFiddle

http://s9.postimage.org/nfpyqx71b/Capture.jpg！

Answer 1

如果您使用<ul>和<li>而不是使用<span>会更容易。就像Parallel 2ne所说的那样取决于你的html标记。但是，您也可以通过创建一个在单独悬停<span>元素时自动触发的函数来强制它通过Javascript / jQuery。触发后，它会对子display:block元素应用display:hidden或<span>。

Answer 2

你可以在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;
}

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

Answer 3

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