固定在右侧的CSS导航菜单_菜单导航特效

固定显示在网页右侧的CSS菜单，在一些博客中通常会看到，一般作为辅助菜单，它悬浮在主菜单的上部，像著名的WordPress博客程序就采用有这种形式。同时，通过这个菜单你还可以了解到CSS定位的题目，一举两得。

<!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</a>">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>固定在右侧的CSS菜单</title>
<style type="text/css">
<!--
div#navcontainer
{
font-family: arial;
font-weight: bold;
background: #642;
position: absolute;
right: 0px;
margin: 0;
padding: 9px;
border: 0;
}

div#navcontainer ul
{
display: inline;
margin: 0;
padding: 0;
list-style: none;
border: solid 1px #642;
}

div#navcontainer h2
{
border: solid 1px #642;
padding: 4px;
text-align: center;
}

div#navcontainer ul li
{
display: inline;
margin: 0;
}

div#navcontainer ul li a
{
color: #a10;
background: #ffc;
margin: 0;
padding: 2px 5px 2px 5px;
text-decoration: none;
}

div#navcontainer ul li a:hover
{
background: #e8db6f;
border-bottom: solid 9px #ffc;
}
-->
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="/" id="current">mb5u.com</a></li>
<li><a href="/sort/list_1_1.shtml">ASP</a></li>
<li><a href="/sort/list_11_203_1.shtml">AJAX</a></li>
<li><a href="/sort/list_11_112_1.shtml">JQUERY</a></li>
<li><a href="/sort/list_11_1.shtml">EXT</a></li>
</ul>
</div>
</body>
</html>

所属频道：菜单导航特效/更新时间：2010-05-22

[收藏][报错][返回列表]

固定在右侧的CSS导航菜单_菜单导航特效

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些