首页 > 网页导航栏鼠标移上去自动弹出下拉菜单是怎么做的?

网页导航栏鼠标移上去自动弹出下拉菜单是怎么做的?

我的想法是用jquery监控mouseover事件,然后这是设置菜单为show。当mouseout时间触发就隐藏。但是这里的一个问题是,当从导航栏移向下拉菜单是,由于mouseout时间触发,下拉菜单就失效了。请问下自动弹出的下拉菜单一般是怎么实现的,求给一个代码例子?


汗,真是十分荣幸,每次都邀请我T_T

这个用js做也可以,但是我比较喜欢我下面给的这个网址的方法,用CSS就可以了~废话不多说,继续放上网址~

http://zespia.tw/blog/2012/01/24/css-multi-level-menu/


谢谢邀请,啥也不说,先上一个不用JS的代码:

方法1:

<meta charset="UTF-8" />
<div class="menubar">
    <div class="menuitem">
        <div>菜单1</div>
        <div class="submenu">
            <div>子菜单1</div>
            <div>子菜单2</div>
        </div>
    </div>
    <div class="menuitem">
        <div>菜单2</div>
        <div class="submenu">
            <div>子菜单1</div>
            <div>子菜单2</div>
            <div>子菜单3</div>
        </div>
    </div>
    <div class="menuend"></div>
</div>
<p>
lsjflsjlajlsa;djflqjwwlejrflsjdlfjwqoo;lnsdl;fgnsl;rjwjeflsdjfljl;jfowei
</p>
<style type="text/css">
    .menubar
        {line-height: 24px;}
    .menubar .menuend
        {clear: both;}
    .menuitem
        {background: #fff; border: 1px solid #c00; position: relative; float: left; margin-right: 1em;}
    .menuitem .submenu
        {background: #ccc; border: 1px solid #00c; position: absolute; top: 25px; left: -1px; width: 5em;}
    /** 下面的控制显示和隐藏 **/
    .menuitem .submenu
        {display: none;}
    .menuitem:hover .submenu
        {display: block;}
</style>

哟,上面有位哥们已经给出了这个答案了。一会有空我再来一个。

【热门文章】
【热门文章】