CSS菜单：基本横向菜单效果超炫_DIV+CSS实例

教程Tag：暂无Tag,欢迎添加,赚取U币!

　　在CSS网页布局中，我们比较头疼的问题就是如何制作质量高的CSS菜单。今天我们向大家介绍一个实例。这是一位国外高手nundroo制作的，下面是此菜单的效果图：

　　我们看此菜单的xhtml代码：

示例代码 [www.mb5u.com]

<ul>
<li id="bu1"><a href="#">homepage</a></li>
<li id="bu2"><a href="#">business</a></li>
<li id="bu3"><a href="#">personal</a></li>
<li id="bu4"><a href="#">information</a></li>
</ul>

　　xhtml代码非常简洁，就是一个无序列表UL。重点在于应用CSS对其表现进行控制与设置。

　　我们看CSS代码：

示例代码 [www.mb5u.com]

body {
margin: 26px;
padding: 0;
background: #fff url(back.png) no-repeat;
}
span {
display: none;
}
ul {
position: relative;
width: 800px;
background: url(bg_nav.png) no-repeat;
height: 113px;
list-style-type: none;
margin: 0;
padding: 0;
}
li#bu1 a, li#bu2 a, li#bu3 a, li#bu4 a {
background: transparent;
position: absolute;
width: 110px;
height: 32px;
bottom: 0;
text-decoration: none;
}
/* adjusted values for IE6 */
* html*li#bu1 a, * html*li#bu2 a, * html*li#bu3 a, * html*li#bu4 a { bottom: -1px; }
li#bu1 a { left: 21px; }
li#bu2 a { left: 122px; background: url(business_hover.gif) 0 0 no-repeat; }
li#bu3 a { left: 223px; background: url(personal_hover.gif) 0 0 no-repeat; }
li#bu4 a { left: 324px; background: url(information_hover.gif) 0 0 no-repeat; }
li#bu2 a:hover, li#bu3 a:hover, li#bu4 a:hover { background-position: 0 -32px; }

　　查看最终的运行效果：

代码调试框 [www.mb5u.com]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="application/xhtml xml; charset=iso-8859-1" />
<meta name="author" content="Didier Hilhorst" />
<title>CSS Based Navigation</title>
<style media="all" type="text/css">

body {
	margin: 26px;
	padding: 0;
	background: #fff url(attachments/month_0703/359/back.png) no-repeat;
}
span {
	display: none;
}
ul {
	position: relative;
	width: 800px;
	background: url(attachments/month_0703/359/bg_nav.png) no-repeat;
	height: 113px;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
li#bu1 a, li#bu2 a, li#bu3 a, li#bu4 a {
	background: transparent;
	position: absolute;
	width: 110px;
	height: 32px;
	bottom: 0;
	text-decoration: none;
}
/* adjusted values for IE6 */
* html*li#bu1 a, * html*li#bu2 a, * html*li#bu3 a, * html*li#bu4 a { bottom: -1px; }
li#bu1 a { left: 21px; }
li#bu2 a { left: 122px; background: url(attachments/month_0703/359/business_hover.gif) 0 0 no-repeat; }
li#bu3 a { left: 223px; background: url(attachments/month_0703/359/personal_hover.gif) 0 0 no-repeat; }
li#bu4 a { left: 324px; background: url(attachments/month_0703/359/information_hover.gif) 0 0 no-repeat; }
li#bu2 a:hover, li#bu3 a:hover, li#bu4 a:hover { background-position: 0 -32px; }

</style>
</head>

<body>
<ul>
<li id="bu1"><a href="#">homepage</li>
<li id="bu2"><a href="#">business</li>
<li id="bu3"><a href="#">personal</li>
<li id="bu4"><a href="#">information</li>
</ul>
</body>
</html>

[ 可先修改部分代码再运行查看效果 ]