JQuery 浮动导航栏

代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery 浮动导航栏</title>
<script type="text/javascript" src="http://www.cndns.com/Scripts/jquery.js"></script>
<style type="text/css">
/* 浮动导航栏 Begin */
#floatMenu
{
 padding-top: 5px;
 background: url(http://www.cndns.com/cn/gdomain/images/quickmenu.gif) no-repeat;
 border: 1px solid #dcdcdc;
 position: absolute;
 top: 250px;
 left: 5px;
 margin-left: 0px;
 width: 86px;
}
#floatMenu ul
{
 margin-left: 0px;
 background-color:White;
	list-style-type: none;
	padding:10px
}
#floatMenu ul li a
{
 display: block;
 text-decoration: none;
 color: #000;

}
#floatMenu ul li a:hover
{
 color: #fff;
 background-color: #ff8000;
}
#floatMenu ul.menu1 li a:hover
{
 border-color: #09f;
}
/* 浮动导航栏 End */
</style>
</head>

<body>
<div id="floatMenu">
 <ul class="menu1">
 <li><a href="#" onclick="return false;">Home</a></li>
 <li><a href="#" onclick="return false;">About Us</a></li>
 <li><a href="#" onclick="return false;">Product</a></li>
 <li><a href="#" onclick="return false;">Contact</a></li>
 </ul>
</div>

[Ctrl+A 全选提示:你可先修改部分代码,再点运行代码]

posted on 2009-08-26 17:12 ξσ Dicky σξ 阅读(1304) 评论(0) 编辑收藏举报

努力加载评论中...

刷新页面返回顶部

ξσ Dicky's Blog σξ

导航

公告

JQuery 浮动导航栏