html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<link rel="stylesheet" type="text/css" href="../css/test.css"/>
<script type="text/javascript" src="../js/jquery-3.4.0.js"></script>
<script type="text/javascript" src="../js/test.js"></script>
<body>
<div id="menu">
<ul><a>Index</a></ul>
<ul><a>Home</a></ul>
<ul id="menu-items">
<a>Items</a>
<div id="items">
<li>Item-1</li>
<li>Item-2</li>
<li>Item-3</li>
<li>Item-4</li>
<li>Item-5</li>
</div>
</ul>
<ul><a>Help</a></ul>
</div>
</body>
</html>
css代码
* {
padding: 0;
margin: 0;
}
#menu {
font-size: 0px;
}
#menu > ul {
width: 100px;
display: inline-block;
margin-right: 1px;
}
#menu > ul > a {
display: inline-block;
width: 100%;
background: deepskyblue;
text-align: center;
font-size: 16px;
color: white;
line-height: 100%;
padding-top: 10px;
padding-bottom: 10px;
-webkit-user-select: none;
cursor: pointer;
}
#items {
position: relative;
float: left;
top: 1px;
}
#items > li {
width: 100%;
background: deepskyblue;
font-size: 16px;
list-style: none;
padding-top: 8px;
padding-bottom: 8px;
margin-bottom: 1px;
display: inline-block;
text-align: center;
color: white;
}
#menu > ul > a:hover {
background: dodgerblue;
}
#items > li:hover {
background: dodgerblue;
}
js代码
$(() => {
$("#menu-items").hover(() => {
$("#items").stop().slideDown(300);
}, () => {
$("#items").stop().slideUp(300);
});
});
运行效果
