第一种，如果要看演示，新建记事本，把下面代码加进去后保存，文件名改成 ：abc.htm,然后直接运行就可以看了。
第二种：
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title><a href="http://blog.h3bbs.com" target="_blank">天涯博客</a>纯CSS弹出菜单</title>
<style type="text/css">
<!--
body{
margin-top:0px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
background:#fff;
text-align:center;
color: #333;
font-family:arial,verdana,sans-serif;
}
#topbanner{
margin-left:auto;
margin-right:auto;
width:580px;
height:40px;
border-bottom:5px solid #ff9900;
}
#bottom{
margin-left:auto;
margin-right:auto;
width:580px;
height:40px;
border-top:5px solid #ff9900;
}
/*菜单样式定义*/
#menu{
clear:both;
margin-right: auto;
margin-left: auto;
width:580px;
height:24px;
color:#fff;
background-color:#900;
}
/*主菜单样式定义*/
.mainmenu{
float:left;
width:64px;
font-size:13px;
color:#fff;
border-left:1px solid #999;
}
.menucontent{
float:left;
width:80px;
height:20px;
color:#fff;
padding-top:4px;
}
.menucontent a:link {
color: #fff;
display:block;
text-decoration: none;
}
.menucontent a:visited {
color: #fff;
display:block;
text-decoration: none;
}
.menucontent a:hover {
color: #fff;
text-decoration: none;
background-color:#000;
}
/*子菜单样式定义*/
.submenu{
clear:both;
float:left;
position:absolute;
width:80px;
padding:0px;
font-size:13px;
}
.submenu ul {
background-color:#eee;
list-style-type:none;
width:82px;
line-height:24px;
}
.submenu li {
border-bottom: #ccc 1px dotted;
}
.submenu li a:link,a:visited {
color: #333;
display: block;
text-decoration: none;
}
.submenu li a:hover {
color: #fff;
text-decoration: none;
background-color:#900;
border-top:1px solid #fff;
}
-->
</style>
</head>
<body>
<div ></div>
</body>
</html>
Copy code
</ul></div>
第二种：
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title><a href="http://blog.h3bbs.com" target="_blank">天涯博客</a>纯CSS弹出菜单</title>
<style type="text/css">
<!--
body{
margin-top:0px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
background:#fff;
text-align:center;
color: #333;
font-family:arial,verdana,sans-serif;
}
#topbanner{
margin-left:auto;
margin-right:auto;
width:580px;
height:40px;
border-bottom:5px solid #ff9900;
}
#bottom{
margin-left:auto;
margin-right:auto;
width:580px;
height:40px;
border-top:5px solid #ff9900;
}
/*菜单样式定义*/
#menu{
clear:both;
margin-right: auto;
margin-left: auto;
width:580px;
height:24px;
color:#fff;
background-color:#900;
}
/*主菜单样式定义*/
.mainmenu{
float:left;
width:64px;
font-size:13px;
color:#fff;
border-left:1px solid #999;
}
.menucontent{
float:left;
width:80px;
height:20px;
color:#fff;
padding-top:4px;
}
.menucontent a:link {
color: #fff;
display:block;
text-decoration: none;
}
.menucontent a:visited {
color: #fff;
display:block;
text-decoration: none;
}
.menucontent a:hover {
color: #fff;
text-decoration: none;
background-color:#000;
}
/*子菜单样式定义*/
.submenu{
clear:both;
float:left;
position:absolute;
width:80px;
padding:0px;
font-size:13px;
}
.submenu ul {
background-color:#eee;
list-style-type:none;
width:82px;
line-height:24px;
}
.submenu li {
border-bottom: #ccc 1px dotted;
}
.submenu li a:link,a:visited {
color: #333;
display: block;
text-decoration: none;
}
.submenu li a:hover {
color: #fff;
text-decoration: none;
background-color:#900;
border-top:1px solid #fff;
}
-->
</style>
</head>
<body>
<div ></div>
</body>
</html>