<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>用jquery实现的一个下拉菜单</title>
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
/*当鼠标悬浮在某个链接上时,改变下拉列表的display属性*/
$(document).ready(function () {
$('nav li').hover(function () {
/* 当鼠标悬浮在链接上时执行的操作*/
$(this).find('.sub-menu').css('display', 'block');
}, function () {
/*当鼠标离开链接时执行的操作*/
$(this).find('.sub-menu').css('display', 'none');
});
});
</script>
<!-- 设置样式 -->
<style>
nav a { /* 设置所有的链接都没有下划线*/
text-decoration: none;
display:inline-block;
width:100px;
height:30px;
line-height:30px;
color:white;
background:blue;
margin:auto 5px;
}
nav > ul > li { /*设置一级菜单样式*/
float: left;
text-align: center;
padding: 0 0.5em;
}
nav li ul.sub-menu { /*设置二级菜单样式*/
display: none;
.sub-menu li {
color: white; /*设置二级菜单里的项的样式*/
margin:1px auto;
}
.sub-menu li:hover { /*设置二级菜单中有鼠标悬停在某一项上时的样式*/
background-color: white;
}
.sub-menu li:hover a { /*设置二级菜单中有鼠标悬停在某一项上时链接的样式*/
color: white;
}
ul {
list-style: none; /*设置无序列表的样式*/
}
</style>
</head>
<body>
<!-- 注意:nav标签是H5中新增的标签,显示链接区域-->
<nav>
<ul>
<li><a href="#"> 首页</a>
<ul class="sub-menu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul>
</li>
<li><a href="#">第二页 </a>
<ul class="sub-menu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul>
</li>
<li><a href="#">第三页 </a>
<ul class="sub-menu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>用jquery实现的一个下拉菜单</title>
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
/*当鼠标悬浮在某个链接上时,改变下拉列表的display属性*/
$(document).ready(function () {
$('nav li').hover(function () {
/* 当鼠标悬浮在链接上时执行的操作*/
$(this).find('.sub-menu').css('display', 'block');
}, function () {
/*当鼠标离开链接时执行的操作*/
$(this).find('.sub-menu').css('display', 'none');
});
});
</script>
<!-- 设置样式 -->
<style>
nav a { /* 设置所有的链接都没有下划线*/
text-decoration: none;
display:inline-block;
width:100px;
height:30px;
line-height:30px;
color:white;
background:blue;
margin:auto 5px;
}
nav > ul > li { /*设置一级菜单样式*/
float: left;
text-align: center;
padding: 0 0.5em;
}
nav li ul.sub-menu { /*设置二级菜单样式*/
display: none;
padding-left: 0 !important;
position:absolute; /*注意:如果要使二级菜单不把菜单下面的内容挤到下面去,则要设置该属性,否则菜单下面的内容会被挤到下面去*/
z-index:1;/*将该二级菜单的层级提高*/
.sub-menu li {
color: white; /*设置二级菜单里的项的样式*/
margin:1px auto;
}
.sub-menu li:hover { /*设置二级菜单中有鼠标悬停在某一项上时的样式*/
background-color: white;
}
.sub-menu li:hover a { /*设置二级菜单中有鼠标悬停在某一项上时链接的样式*/
color: white;
}
ul {
list-style: none; /*设置无序列表的样式*/
}
</style>
</head>
<body>
<!-- 注意:nav标签是H5中新增的标签,显示链接区域-->
<nav>
<ul>
<li><a href="#"> 首页</a>
<ul class="sub-menu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul>
</li>
<li><a href="#">第二页 </a>
<ul class="sub-menu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul>
</li>
<li><a href="#">第三页 </a>
<ul class="sub-menu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>