www.itfly.org		您正在浏览: 主页>网络基础>HTTP协议>


	文章搜索


	热点文章

Http指纹识别技术

HTTP协议四--关于Chunked编码

浅谈HTTP协议（一）--结构

浅谈HTTP协议（二）--返回值

利用HTTP协议的特性进行拒绝服务

HTTP和WWW的配置注意事项

协议分析的优势—HTTP分析器检测

WWW的核心——HTTP协议

HTTP协议三--断点续传

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

来源：bbs.51js.com 作者：时间：1970-01-01 字体：[大中小]

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

<!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>

<body>

<ul class="menu">

<li><a href="#">Item 1</a></li>

<li>

<a href="#">Menu Item &gt;</a>

<ul class="menu">

<li><a href="#">item</a></li>

<li>

<a href="#">item &gt;</a>

<ul class="menu">

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

</ul>

</li>

<li>

<a href="#">item &gt;</a>

<ul class="menu">

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

</ul>

</li>

<li>

<a href="#">item &gt;</a>

<ul class="menu">

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</body>

</html>

www.itfly.org

返回顶部 | 打印本页 | 关闭窗口