网页设计北京网站建设不用script仅用css编写无限分级弹出菜单_网站制作 -网站建设|北京网站建设|北京网站制作|北京网站建设首选品牌【企通互联】

隐藏在Windows XP中的二十八个秘密武器
 北京网站设计网页表格深层探密
 网页设计提高页面显示速度的秘技
 网站建设在Dreamweaver中插入有颜色的直线
 网站建设第十六节窗框结构
 北京网站建设教菜鸟学Dreamweaver 2004自定义站点
 北京网站设计Flash打造迷你特色音乐播放器
 企通互联网页的布局
 北京网页设计构建Blog全程实录-Dreamweaver构建Blog
网站建设在页面里插入flash

品牌理念

北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!

友好连接

文章搜索

你的位置：首页 >> 网站制作 >> 网页设计北京网站建设不用script仅用css编写无限分级弹出菜单

网页设计北京网站建设不用script仅用css编写无限分级弹出菜单

作者：北京网站建设日期：2008-03-27 06:03:34 来源： http://www.qitongnet.com

一直以来，我们大多使用js www.qitongnet.com来实现弹出菜单，可是根据 w3c 的北京网页设计css标准，根本就没有这个必要。只需要简单得使用北京网站建设css+html就可以做出一个无限分级的弹出菜单。北京网站制作

　　没错，就是利用 Element:hover 这个伪类。

　　注意，浏览这个例子，你必须使用标准浏览器，例如 Mozilla Firefox/ Opera 7.5

网站建设　　北京网站设计IE 不行!!

企通互联　　 <!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 ></a> <ul class="menu"> <li><a href="#">item</a></li> <li> <a href="#">item ></a> <ul class="menu"> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> </ul> </li> <li> <a href="#">item ></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 ></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><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> 北京网站设计
　　

　　如果你使用的IE浏览器的话就看看下面的运行效果，这是用firefox浏览得到的结果：网站设计

企通互联

字体：【大】【中】【小】

上一篇：网站建设透明的(transparence)CSS菜单

下一篇：企通互联CSS+DIV设计实例：纯CSS制作下拉导航菜单

这是一个与众不同的品牌，企通互联只专注于网站建设领域！中小型企业网站建设最佳合作伙伴！网站建设咨询热线：010-65587978/77/76/75!

网站建设|北京网站建设|北京网站制作|北京网站建设首选品牌【企通互联】

http://www.qitongnet.com 网站建设咨询热线：010-65587978/77/76/75

相关文章

品牌理念

友好连接

文章搜索

网页设计北京网站建设不用script仅用css编写无限分级弹出菜单