奇点中文网 - 无序列表UL制作菜单的样例

网站风格: 红 | 蓝

奇点网 - Web开发 - CSS样式表 - 无序列表UL制作菜单的样例

无序列表UL制作菜单的样例

来源：http://www.7dit.com 作者：7dit 发布日期：2008-09-21 02:22:12 点击量：500

<!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=gb2312" />
<title>navi demo</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.top{
width: 700px;
margin-right: auto;
margin-left: auto;
border: 1px dotted #CCCCCC;
height: 150px;
}
ul.nav li{
float: left;
margin-left: 0px;
list-style-type: none;
}
ul.nav li a{
background-image: url(nav_main_bg.jpg);
width: 70px;
height:25px;
display: block;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
text-align: center;
background-position: left 0px;
background-repeat: no-repeat;
padding-top: 10px;
}
ul.nav{
margin-left: 150px;
margin-top: 50px;
}
ul.nav li a:hover{
background-image: url(nav_main_bg.jpg);
width: 70px;
height:25px;
display: block;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
text-align: center;
background-position: left -35px;
background-repeat: no-repeat;
padding-top: 10px;
}
</style>
</head>

<body>
<div class="top">
<ul class="nav">
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link4</a></li>
<li><a href="#">link5</a></li>
</ul>
</div>
</body>
</html>