龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > div+css/html >

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

时间:2012-12-29 08:41来源:未知 作者:admin 点击:
分享到:
一直以来,我们大多使用js来实现弹出菜单,可是根据 w3c 的CSS标准,根本就没有这个必要。只需要简单得使用css+html就可以做出一个无限分级的弹出菜单。 没错,就是利用 Element:hover
  一直以来,我们大多使用js来实现弹出菜单,可是根据 w3c 的CSS标准,根本就没有这个必要。只需要简单得使用css+html就可以做出一个无限分级的弹出菜单。
  没错,就是利用 Element:hover 这个伪类。
  注意,浏览这个例子,你必须使用标准浏览器,例如 Mozilla Firefox/ Opera 7.5
  IE 不行!!
  

function Preview(obj)
{
var TestWin=open('');
TestWin.document.write(obj.value);
}
function copyCode(obj) {
var rng = document.body.createTextRange();
rng.moveToElementText(obj);
rng.scrollIntoView();
rng.select();
rng.execCommand("Copy");
rng.collapse(false);
}
function saveCode(obj) {
var winname = window.open('', '_blank', 'top=10000');
winname.document.open('text/html', 'replace');
winname.document.writeln(obj.value);
winname.document.execCommand('saveas','','homepage.yesky.com.htm');
winname.close();
}
<!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;
第 1 2 3 页
精彩图集

赞助商链接