找出jQuery菜单的问题_Jquery_Menu_Hover

找出jQuery菜单的问题

jquery menu

找出jQuery菜单的问题,jquery,menu,hover,Jquery,Menu,Hover,我正在尝试从头开始编写jQuery悬停菜单，因为我现在正在学习jQuery。我已经了解了悬停菜单的基本知识，但我似乎无法正确定位子菜单，它们破坏了我的整个菜单。default.css样式表中只有*{padding:0；margin:0} <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/default.css" />

我正在尝试从头开始编写jQuery悬停菜单，因为我现在正在学习jQuery。我已经了解了悬停菜单的基本知识，但我似乎无法正确定位子菜单，它们破坏了我的整个菜单。default.css样式表中只有*{padding:0；margin:0}

<!DOCTYPE html>

<html>

<head>

    <link rel="stylesheet" type="text/css" href="css/default.css" />

    <script type="text/javascript" src="jQuery/jquery-1.10.2.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {
            $('.submenu').hide();
            $('.dropdown li').hover(function() {
                $('.submenu').show();
            }, function() {
                $('.submenu').hide();
            });
        });

    </script>

    <style type="text/css">

        #menu {
            width: 1000px;

            margin:auto;
            position: relative;

            text-align: center;
            text-transform: uppercase;
        }

        .mnLinks {
            padding: 0;
            margin: 0;

            display: inline;
            position: relative;
        }

        .mnLinks a {
            width: 200px;

            padding: 10px 0;
            margin: 0;
            float: left;                

            display: inline-block;
            color: #ffffff;
            background: #333337;
            text-decoration: none;
        }

.submenu li a {
            width: 200px;

            position: relative;
            top:100px;

        }
    </style>

</head>

<body>

<div id="menu">

    <ul class="dropdown">

        <li class="mnLinks"><a href="#" id="lnk01">Link #01</a></li>

            <ul class="submenu">

                <li><a href="#">SubLink#01</a></li>

                <li><a href="#">SubLink#02</a></li>

                <li><a href="#">SubLink#03</a></li>

            </ul>

        <li class="mnLinks"><a href="#">Link #02</a></li>

        <li class="mnLinks"><a href="#">Link #03</a></li>

            <ul class="submenu">

                <li><a href="#">SubLink#04</a></li>

                <li><a href="#">SubLink#05</a></li>

                <li><a href="#">SubLink#06</a></li>

            </ul>

        <li class="mnLinks"><a href="#">Link #04</a></li>

        <li class="mnLinks"><a href="#">Link #05</a></li>

    </ul>

</div>

</body>

</html>


$（文档）.ready（函数（）{
$（'.submenu'）.hide（）；
$（'.dropdown li'）.hover（函数（）{
$（'.submenu'）.show（）；
}，函数（）{
$（'.submenu'）.hide（）；
});
});
#菜单{
宽度：1000px；
保证金：自动；
位置：相对位置；
文本对齐：居中；
文本转换：大写；
}
.mnLinks{
填充：0；
保证金：0；
显示：内联；
位置：相对位置；
}
.MNA{
宽度：200px；
填充：10px0；
保证金：0；
浮动：左；
显示：内联块；
颜色：#ffffff；
背景#333337；
文字装饰：无；
}
.子菜单LIA{
宽度：200px；
位置：相对位置；
顶部：100px；
}

希望这能起作用（尽管您可能还是想重新编写css）：


$（文档）.ready（函数（）{
$（'.submenu'）.hide（）；
$（'.dropdown li'）.hover（函数（）{
$（this.children（'.submenu'）.show（）；
}，函数（）{
$（this）.children（'.submenu'）.hide（）；//仅显示和隐藏子元素
});
});
#菜单{
宽度：1000px；
保证金：自动；
位置：相对位置；
文本对齐：居中；
文本转换：大写；
}
.mnLinks{
填充：0；
保证金：0；
显示：内联；
位置：相对位置；
}
.MNA{
宽度：200px；
填充：10px0；
保证金：0；
浮动：左；
显示：内联块；
颜色：#ffffff；
背景#333337；
文字装饰：无；
}
.子菜单LIA{
宽度：200px；
位置：相对位置；
/*顶部：100px；不需要，因为它向下推送项目*/
}
保险商实验室
{
列表样式类型：无；
保证金：0；
填充：0；
}
.下拉列表李
{
浮动：左；
}
李先生
{
浮动：无；
}

希望这能起作用（尽管你可能还是想修改你的css）：


$（文档）.ready（函数（）{
$（'.submenu'）.hide（）；
$（'.dropdown li'）.hover（函数（）{
$（this.children（'.submenu'）.show（）；
}，函数（）{
$（this）.children（'.submenu'）.hide（）；//仅显示和隐藏子元素
});
});
#菜单{
宽度：1000px；
保证金：自动；
位置：相对位置；
文本对齐：居中；
文本转换：大写；
}
.mnLinks{
填充：0；
保证金：0；
显示：内联；
位置：相对位置；
}
.MNA{
宽度：200px；
填充：10px0；
保证金：0；
浮动：左；
显示：内联块；
颜色：#ffffff；
背景#333337；
文字装饰：无；
}
.子菜单LIA{
宽度：200px；
位置：相对位置；
/*顶部：100px；不需要，因为它向下推送项目*/
}
保险商实验室
{
列表样式类型：无；
保证金：0；
填充：0；
}
.下拉列表李
{
浮动：左；
}
李先生
{
浮动：无；
}

试试这个：

HTML
在

JS
更改了选择子菜单的方式

$(document).ready(function () {
    $('.submenu').hide();
    $('.dropdown li').hover(function () {
        $(this).children('.submenu').show();
    }, function () {
        $(this).children('.submenu').hide();
    });
});

试试这个：

HTML
在

JS
更改了选择子菜单的方式

$(document).ready(function () {
    $('.submenu').hide();
    $('.dropdown li').hover(function () {
        $(this).children('.submenu').show();
    }, function () {
        $(this).children('.submenu').hide();
    });
});

您能创建一个JSFIDLE吗？您能创建一个JSFIDLE吗？非常感谢你们两位。我真的很感激。非常感谢你们两位。我真的很感激。

#menu {
    width: 1000px;
    text-transform: uppercase;
    text-align:center;
}
ul, li {
    list-style:none;
    text-decoration:none;
}
.dropdown {
    width: 1000px;
    padding: 0;
    margin: 0;
}
.mnLinks {
    width: 200px;
    padding: 10px 0;
    margin: 0;
    display: inline-block;
    float: left;
    color: #ffffff;
    background: #333337;
    text-decoration: none;
}
.mnLinks a {
    color: #ffffff;
    text-decoration: none;
    padding: 10px 0;
}
.submenu {
    position:relative;
    top:10px;
}
.submenu li a {
    display:block;
    float:none;
}

$(document).ready(function () {
    $('.submenu').hide();
    $('.dropdown li').hover(function () {
        $(this).children('.submenu').show();
    }, function () {
        $(this).children('.submenu').hide();
    });
});