1使用$(function(){...})获取到想要作用的HTML元素。
2通过使用children()方法寻找子元素。
3通过使用show()方法来显示HTML元素。
4通过使用hide()方法来隐藏HTML元素。
5jQuery库引用方法：将jQuery库下载到电脑上，然后引用。
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
body部分
<
div
id
=
"nav"
class
=
"nav"
>
<
ul
>
<
li
><
a
href
=
"#"
>一级导航</
a
></
li
>
<
li
class
=
"navmenu"
><
a
href
=
"#"
>一级导航</
a
>
<
ul
>
<
li
><
a
href
=
"#"
>二级导航</
a
></
li
>
<
li
><
a
href
=
"#"
>二级导航</
a
></
li
>
<
li
><
a
href
=
"#"
>二级导航</
a
></
li
>
</
ul
>
</
li
>
<
li
class
=
"navmenu"
><
a
href
=
"#"
>一级导航</
a
>
<
ul
>
<
li
><
a
href
=
"#"
>二级导航</
a
></
li
>
<
li
><
a
href
=
"#"
>二级导航</
a
></
li
>
<
li
><
a
href
=
"#"
>二级导航</
a
></
li
>
</
ul
>
</
li
>
<
li
><
a
href
=
"#"
>一级导航</
a
></
li
>
<
li
><
a
href
=
"#"
>一级导航</
a
></
li
>
</
ul
>
</
div
>
css部分
*{
margin
:
0
;
padding
:
0
;
}
.nav{
background-color
:
#EEEEEE
;
height
:
40px
;
width
:
450px
;
margin
:
0
auto
;
}
ul{
list-style
:
none
;
}
ul li{
float
:
left
;
line-height
:
40px
;
text-align
:
center
;
}
a{
text-decoration
:
none
;
color
:
#000000
;
display
:
block
;
width
:
90px
;
height
:
40px
;
}
a:hover{
background-color
:
#666666
;
color
:
#FFFFFF
;
}
ul li ul li{
float
:
none
;
background-color
:
#EEEEEE
;
}
ul li ul{
display
:
none
;
}
ul li ul li a:hover{
background-color
:
#009933
;
}
/*:hover 选择器用于选择鼠标指针浮动在上面的元素。*/
js部分
$(
function
(){
$(
".navmenu"
).mouseover(
function
(){
$(
this
).children(
"ul"
).show();
})
$(
".navmenu"
).mouseout(
function
(){
$(
this
).children(
"ul"
).hide();
})
})