Drop down menu CSS3 on Hover

Question

Currently I am using <span>Home<span> on hover of an anchor element within a li . However, I need a drop-down on hover. Something like the same home span but two or three more items underneath it. Any help would be appreciated. Click for jsFiddle

!

Answer 1

It would be easier if you use <ul> and <li> rather than using <span> . Like what Parallel 2ne said it depends on your html markup. However you could also force it via Javascript/jQuery by creating a function that triggers automatically when you hover the <span> elements individually. When it triggers it applies display:block or display:hidden for the sub <span> elements.

Answer 2

you can do it on css and html, without any js file. The HTML Code you need :

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

and here is the CSS you must attach :

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

You can use transition to animate your effects .

Answer 3

您应该看看使用图标字体而不是图片，如果您使用许多这样的图像，则可以使整个站点小得多，并且效率更高，现在为您制作一个jsfiddle。