jquery 做的导航

最新推荐文章于 2024-07-07 23:10:31 发布

letIgo

最新推荐文章于 2024-07-07 23:10:31 发布

阅读量962

点赞数

文章标签： jquery function xhtml float server border

本文链接：https://blog.csdn.net/letIgo/article/details/7346345

版权

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#Menu
{
list-style-type: none;
padding: 0px;
}
#Menu li
{
float: left;
width: 80px;
height: 26px;
}
#Menu li a
{
display: block;
background: #20548E;
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 60px;
color: #EAFFED;
white-space: nowrap;
}
#Menu li a:hover
{
background: #1A4473;
}
#Menu li ul
{
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border: 1px solid white;
}
#Menu li ul li
{
float: none;
display: inline;
font-size: small;
}
#Menu li ul li a
{
width: auto;
background-color: #20548E;
}

#Menu li ul li a:hover
{
background-color: #7F1616;
}
</style>
<script src="Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
//ready在文档加载后激活函数
$(window.document).ready(function () {
//当鼠标放在导航上时，显示其子集，bind()向匹配元素附加一个或更多事件处理器
$('#Menu>li').bind('mouseover', function () {
$(this).find('ul').css('visibility', 'visible');
});
//当鼠标离开导航时，隐藏其子集
$('#Menu>li').bind('mouseout', function () {
$(this).find('ul').css('visibility', 'hidden');
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul id="Menu">
<li><a href="#">何洁</a>
<ul>
<li><a href="http://www.baidu.com">爱过的你</a></li>
<li><a href="#">我多么怀念</a></li>
</ul>
</li>
<li><a href="#">凤凰传奇</a>
<ul>
<li><a href="#">光芒</a></li>
<li><a href="#">策马奔腾</a></li>
<li><a href="#">大声唱</a></li>
<li><a href="#">绿旋风</a></li>
</ul>
</li>
<li><a href="#">S.H.E</a>
<ul>
<li><a href="#">不想长大</a></li>
<li><a href="#">波斯猫</a></li>
<li><a href="#">一眼万年</a></li>
<li><a href="#">星光</a></li>
<li><a href="#">天灰</a></li>
<li><a href="#">半糖主义</a></li>
</ul>
</li>
<li><a href="#">刘若英</a>
<ul>
<li><a href="#">很爱很爱你</a></li>
<li><a href="#">我们没有在一起</a></li>
</ul>
</li>
<li><a href="#">慕容晓晓</a>
<ul>
<li><a href="#">姑娘爱情郎</a></li>
<li><a href="#">花心男</a></li>
<li><a href="#">除了我</a></li>
<li><a href="#">赚够了没</a></li>
<li><a href="#">旧爱新伤</a></li>
<li><a href="#">玫瑰天涯</a></li>
<li><a href="#">眼泪不值钱</a></li>
<li><a href="#">曾经的我走了</a></li>
</ul>
</li>
</ul>
</div>
</form>
</body>
</html>