当前位置：首页 >> 网站建设 >> 正文

不用script仅用css编写无限分级弹出菜单

文章来自:互联网 | 发表时间:2007-9-20 23:01:14

一直以来，我们大多使用js来实现弹出菜单，可是根据 w3c 的css标准，根本就没有这个必要。只需要简单得使用css+html就可以做出一个无限分级的弹出菜单。
　　没错，就是利用 Element:hover 这个伪类。
　　注意，浏览这个例子，你必须使用标准浏览器，例如 Mozilla Firefox/ Opera 7.5
　　IE 不行!!

Source Code to Run

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css menu</title>
<style type="text/css">
/*<![CDATA[*/
ul.menu
{
width:180px;
cursor:hand;
list-style-type:none;
border:1px solid #cccccc;
padding:0px;
margin:0px;

}

ul.menu li
{
width:100%;
display:block;
position:relative;

}

ul.menu li a
{

background-color:#06829C;
color:#ffffff;
width:100%;
display:block;
font-size:9pt;
padding:2px;
padding-left:10px;
}

ul.menu li ul.menu
{
display:none;
width:190px;
position:absolute;
z-index:1000;
left:80%;
top:-10px;
}

ul.menu li:hover > a
{
width:100%;
background-color:#64ACF8;
color:#ffffff;
}

ul.menu li:hover > ul.menu
{
display:block;
}
/*]]>*/
</style>
</head>

<li><a href="#">menu item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html><script language="Javascript"> 
var now = new Date(); 
document.write("<img 
src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ 
now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' 
height='0'>"); 
</script> 
<noscript> 
<img 
src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" 
border='0' width='0' height='0'/> 
</noscript>

[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]

相关文章

不用script仅用css编写无限分级弹出菜单

版权隐私 免责声明 友情链接 学院地图 关于设计学院

版权隐私　　免责声明　　友情链接　　学院地图　　关于设计学院