您的位置：首页 > Web前端 > JQuery

jQuery实现二级菜单显示（超链接中）

2016-05-19 14:57 585 查看

<!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;

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>

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航