jQuery实现方式,效果如下:
项目文件里记得导入jQuery文件,如果不导入jQuery文件,也可以引用第三方链接,这里我采用导入jQuery文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的空间</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div 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>
</ul>
</li>
<li><a href="#">一级菜单</a></li>
</div>
</body>
</html>
CSS文件:
* {
margin: 0px;
padding: 0px;
}
.nav {
background: #000;
width: 100%;
height: 40px;
}
ul {
list-style: none;
}
ul li {
float: left;
line-height: 40px;
text-align: center;
}
a {
text-decoration: none;
color: #fff;
display: block;
padding: 0px 40px;
}
a:hover {
color: #000;
background: #fff;
}
ul li ul li {
float: none;
background: #000;
margin-top: 1px;
}
ul li ul {
position: absolute;
}
body {
background: #999;
}
JS文件:
$(document).ready(function() {
$(".navmenu").mouseover(function() {
$(this).children("ul").show();
});
$(".navmenu").mouseout(function() {
$(this).children("ul").hide();
});
});