2005-10
最近几天都在搞这些乱七八糟的东西，今天到是捣鼓出了一个纯CSS的弹出菜单，不喜欢JavaScript，代码太烦琐了，大家先看看效果咯：
下面就是完整的代码了：
别急，我说几句先：
一、菜单的上下需要保持宽度和菜单的宽度一致，否则弹出菜单的位置会发生偏移，这个也是偶从偶做的网页中提起出来时才发现的；
二、下面的这一段中的红色部分必不可少，也不可更改：
/*子菜单样式定义*/
.submenu{
clear:both;
float:left;
position:absolute;
width:80px;
padding:0px;
font-size:13px;
}
三、下载不了的请复制下面的代码，为了不破坏我的blog页面，部分代码被我强制换行了，请自己还原！
废话说完了，看代码：
[down=attachments/month_0510/kh0n_popmenu.txt]点击下载此文件[/down]
popmenu.htm
<!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>纯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 id="topbanner"></div>
<div id="menu">
<div class="mainmenu"><div class="menucontent"><a href="#" title="#">网站首页</a></div></div>
<div class="mainmenu"><div class="menucontent"><a href="#" title="#">中心简介</a></div></div>
<div class="mainmenu" onmouseover="submenu1.style.display='block'"
onmouseout="submenu1.style.display='none'">
<div class="menucontent"><a href="#" title="#">认证考试</a></div>
</div>
<div class="mainmenu" onmouseover="submenu2.style.display='block'"
onmouseout="submenu2.style.display='none'">
<div class="menucontent"><a href="#" title="#">课程介绍</a></div>
</div>
<div class="mainmenu" onmouseover="submenu3.style.display='block'"
onmouseout="submenu3.style.display='none'">
<div class="menucontent"><a href="#" title="#">证书发放</a></div>
</div>
<div class="mainmenu" onmouseover="submenu4.style.display='block'"
onmouseout="submenu4.style.display='none'">
<div class="menucontent"><a href="#" title="#">现在报名</a></div>
</div>
<div class="mainmenu"><div class="menucontent"><a href="#" title="#">资料下载</a></div></div>
</div>
<div class="submenu" style="display:none;margin-left:122px;
onmouseover="submenu1.style.display='block'"
onmouseout="submenu1.style.display='none'"
id="submenu1">
<ul>
<li><a href="#" title="认证介绍">认证介绍</a></li>
<li><a href="#" title="认证流程">认证流程</a></li>
</ul>
</div>
<div class="submenu" style="display:none;margin-left:203px;"
onmouseover="submenu2.style.display='block'"
onmouseout="submenu2.style.display='none'"
id="submenu2">
<ul>
<li><a href="#" title="AIX系统管理">AIX系统管理</a></li>
<li><a href="#" title="UDB DB">UDB DB2</a></li>
<li><a href="#" title="AS400系统">AS400系统</a></li>
<li><a href="#" title="LOTUS系列">LOTUS系列</a></li>
<li><a href="#" title="电子商务">电子商务</a></li>
</ul>
</div>
<div class="submenu" style="display:none;margin-left:284px;"
onmouseover="submenu3.style.display='block'"
onmouseout="submenu3.style.display='none'" id="submenu3">
<ul>
<li><a href="#" title="认证介绍">证书查询</a></li>
<li><a href="#" title="认证流程">证书领取</a></li>
</ul>
</div>
<div class="submenu" style="display:none;margin-left:365px;" onmouseover="submenu4.style.display='block'"
onmouseout="submenu4.style.display='none'"
id="submenu4">
<ul>
<li><a href="#" title="认证介绍">报名流程</a></li>
<li><a href="#" title="报名费用">报名费用</a></li>
<li><a href="#" title="认证流程">网上报名</a></li>
</ul>
</div>
<div id="bottom"></div>
</body>
</html>
您可能对这些文章也感兴趣：
与该文相关的评论：(
我来说两句：
用户中心
日志分类
最新日志
统计信息
图标集合
