Jquery 滑动菜单问题_Jquery_Html_Css

Jquery 滑动菜单问题

jquery html css

Jquery 滑动菜单问题,jquery,html,css,Jquery,Html,Css,我有一个导航菜单，它的子菜单在悬停时向下滑动。菜单的结构如下所示： <ul class='nav'> <li><a href='#'>About</a></li> <ul class='submenu'> <li><a href='#'>Stuff</a></li> </ul> </ul> 但是，使用这种方法，当您将鼠标从主LI上移

我有一个导航菜单，它的子菜单在悬停时向下滑动。菜单的结构如下所示：

<ul class='nav'>
  <li><a href='#'>About</a></li>
  <ul class='submenu'>
    <li><a href='#'>Stuff</a></li>
  </ul>
</ul>

但是，使用这种方法，当您将鼠标从主LI上移开时，子菜单将折叠。我通过移除mouseout上的折叠修复了这个问题，然后为子菜单创建了mouseout事件（即：当鼠标离开子菜单时，它会折叠）。但是，在此设置中，如果您碰巧将鼠标移到主LI上，然后离开而不将鼠标移到菜单中，则子菜单将保持打开状态（显然）

我应该如何处理这一问题，使其能够正常工作，并使其优雅地降级

注意：我还尝试将ul包含在li（

<ul class='nav'>
  <li><a href='#'>About</a>
    <ul class='submenu'>
      <li><a href='#'>Stuff</a></li>
    </ul>
  </li>
</ul>

$('ul.nav li').hover(function(){
  $(this).children('.submenu').stop(true, true).slideToggle();
});

<style type="text/css">
    .menucontrol a:link, .menucontrol a:active, .menucontrol a:visited
    {
        border: 1px solid orange;
        color: white;
        background-color: orange;
    }
    .menucontrol a:hover
    {
        background-color: #fff;
        color: #333;
    }
    .menucontrol, .menucontrol ul
    {
        margin: 0;
        padding: 0;
        list-style-type: none;
        list-style-position: outside;
        position: relative;
        line-height: 1.5em;
    }
    .menucontrol a:link, .menucontrol a:active, .menucontrol a:visited
    {
        display: block;
        padding: 0px 5px;
        text-decoration: none;
    }
    .menucontrol li
    {
        float: left;
        position: relative;
    }
    .menucontrol ul
    {
        position: absolute;
        width: 12em;
        top: 1.5em;
        display: none;
    }
    .menucontrol li ul a
    {
        width: 12em;
        float: left;
    }
    .menucontrol ul ul
    {
        top: auto;
    }
    .menucontrol li ul ul
    {
        left: 12em;
        margin: 0px 0 0 10px;
    }
    .menucontrol li:hover ul ul, .menucontrol li:hover ul ul ul, .menucontrol li:hover ul ul ul ul
    {
        display: none;
    }
    .menucontrol li:hover ul, .menucontrol li li:hover ul, .menucontrol li li li:hover ul, .menucontrol li li li li:hover ul
    {
        display: block;
    }
</style>

<body style="font-family: Consolas; font-size: 11px;">
<ul class="menucontrol">
    <li><a href="#">1 HTML</a></li>
    <li><a href="#">2 CSS</a></li>
    <li><a href="#">3 Javascript</a>
        <ul>
            <li><a href="#">3.1 jQuery</a>
                <ul>
                    <li><a href="#">3.1.1 Download</a><ul>
                        <li><a href="#">3.1.1 Download</a><ul>
                            <li><a href="#">3.1.1 Download</a></li>
                            <li><a href="#">3.1.2 Tutorial</a></li>
                        </ul>
                        </li>
                        <li><a href="#">3.1.2 Tutorial</a></li>
                    </ul>
                    </li>
                    <li><a href="#">3.1.2 Tutorial</a></li>
                </ul>
            </li>
            <li><a href="#">3.2 Mootools</a></li>
            <li><a href="#">3.3 Prototype</a></li>
        </ul>
    </li>
</ul>


.menucontrol a:链接，.menucontrol a:活动，.menucontrol a:已访问
{
边框：1px实心橙色；
颜色：白色；
背景颜色：橙色；
}
.menucontrol a:悬停
{
背景色：#fff；
颜色：#333；
}
.menucontrol、.menucontrol ul
{
保证金：0；
填充：0；
列表样式类型：无；
列表样式位置：外部；
位置：相对位置；
线高：1.5em；
}
.menucontrol a:链接，.menucontrol a:活动，.menucontrol a:已访问
{
显示：块；
填充：0px 5px；
文字装饰：无；
}
梅努康利先生
{
浮动：左；
位置：相对位置；
}
.menucontrol ul
{
位置：绝对位置；
宽度：12em；
顶部：1.5em；
显示：无；
}
.menucontrol li ul a
{
宽度：12em；
浮动：左；
}
.menucontrol ul
{
顶部：自动；
}
.menucontrol li ul
{
左：12em；
利润率：0px 0 10px；
}
.menucontrol li:悬停ul、.menucontrol li:悬停ul、.menucontrol li:悬停ul
{
显示：无；
}
.menucontrol li:hover ul、.menucontrol li:hover ul、.menucontrol li:hover ul、.menucontrol li:hover ul
{
显示：块；
}


功能主菜单（）
{
$（“.menucontrol ul”）.css（{display:“none”}）；//Opera修复
$（“.menucontrol li”）.hover（函数（）
{
$（this.find（'ul:first'）.css（{可见性：“可见”，显示：“无”）.show（400）；
}，函数（）
{
$（this.find（'ul:first'）.css（{visibility:“hidden”}）；
});
}
$（文档）.ready（函数（）
{
主菜单（）；
});

<style type="text/css">
    .menucontrol a:link, .menucontrol a:active, .menucontrol a:visited
    {
        border: 1px solid orange;
        color: white;
        background-color: orange;
    }
    .menucontrol a:hover
    {
        background-color: #fff;
        color: #333;
    }
    .menucontrol, .menucontrol ul
    {
        margin: 0;
        padding: 0;
        list-style-type: none;
        list-style-position: outside;
        position: relative;
        line-height: 1.5em;
    }
    .menucontrol a:link, .menucontrol a:active, .menucontrol a:visited
    {
        display: block;
        padding: 0px 5px;
        text-decoration: none;
    }
    .menucontrol li
    {
        float: left;
        position: relative;
    }
    .menucontrol ul
    {
        position: absolute;
        width: 12em;
        top: 1.5em;
        display: none;
    }
    .menucontrol li ul a
    {
        width: 12em;
        float: left;
    }
    .menucontrol ul ul
    {
        top: auto;
    }
    .menucontrol li ul ul
    {
        left: 12em;
        margin: 0px 0 0 10px;
    }
    .menucontrol li:hover ul ul, .menucontrol li:hover ul ul ul, .menucontrol li:hover ul ul ul ul
    {
        display: none;
    }
    .menucontrol li:hover ul, .menucontrol li li:hover ul, .menucontrol li li li:hover ul, .menucontrol li li li li:hover ul
    {
        display: block;
    }
</style>

<body style="font-family: Consolas; font-size: 11px;">
<ul class="menucontrol">
    <li><a href="#">1 HTML</a></li>
    <li><a href="#">2 CSS</a></li>
    <li><a href="#">3 Javascript</a>
        <ul>
            <li><a href="#">3.1 jQuery</a>
                <ul>
                    <li><a href="#">3.1.1 Download</a><ul>
                        <li><a href="#">3.1.1 Download</a><ul>
                            <li><a href="#">3.1.1 Download</a></li>
                            <li><a href="#">3.1.2 Tutorial</a></li>
                        </ul>
                        </li>
                        <li><a href="#">3.1.2 Tutorial</a></li>
                    </ul>
                    </li>
                    <li><a href="#">3.1.2 Tutorial</a></li>
                </ul>
            </li>
            <li><a href="#">3.2 Mootools</a></li>
            <li><a href="#">3.3 Prototype</a></li>
        </ul>
    </li>
</ul>

<script type="text/javascript">
function mainmenu()
{
    $(" .menucontrol ul ").css({ display: "none" }); // Opera Fix
    $(" .menucontrol li").hover(function()
    {
        $(this).find('ul:first').css({ visibility: "visible", display: "none" }).show(400);
    }, function()
    {
        $(this).find('ul:first').css({ visibility: "hidden" });
    });
}

$(document).ready(function()
{
    mainmenu();
});