来讲讲：不必script仅用css编写无穷分级弹出菜单

只看该作者 · 发表于 2015-1-15 23:21:22

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

可以增加更多的用户而不需要建立独立的版本。可以一次设计，随处发布。
　　一向以来，我们年夜多利用js来完成弹出菜单，但是依据w3c的CSS尺度，基本就没有这个需要。只必要复杂得利用css+html就能够做出一个无穷分级的弹出菜单。
　　没错，就是使用Element:hover这个伪类。
　　注重，扫瞄这个例子，你必需利用尺度扫瞄器，比方MozillaFirefox/Opera7.5
　　IE不可!!
　　<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>cssmenu</title><styletype="text/css">/*<![CDATA[*/ul.menu{width:180px;cursor:hand;list-style-type:none;border:1pxsolid#cccccc;padding:0px;margin:0px;}ul.menuli{width:100%;display:block;position:relative;}ul.menulia{background-color:#06829C;color:#ffffff;width:100%;display:block;font-size:9pt;padding:2px;padding-left:10px;}ul.menuliul.menu{display:none;width:190px;position:absolute;z-index:1000;left:80%;top:-10px;}ul.menuli:hover>a{width:100%;background-color:#64ACF8;color:#ffffff;}ul.menuli:hover>ul.menu{display:block;}/*]]>*/</style></head><body><ulclass="menu"><li><ahref="#">Item1</a></li><li><ahref="#">MenuItem></a><ulclass="menu"><li><ahref="#">item</a></li><li><ahref="#">item></a><ulclass="menu"><li><ahref="#">menuitem</a></li><li><ahref="#">menuitem</a></li></ul></li><li><ahref="#">item></a><ulclass="menu"><li><ahref="#">menuitem</a></li><li><ahref="#">menuitem</a></li><li><ahref="#">menuitem</a></li></ul></li><li><ahref="#">item></a><ulclass="menu"><li><ahref="#">menuitem</a></li><li><ahref="#">menuitem</a></li><li><ahref="#">menuitem</a></li><li><ahref="#">menuitem</a></li><li><ahref="#">menuitem</a></li><li><ahref="#">menuitem</a></li><li><ahref="#">menuitem</a></li><li><ahref="#">menuitem</a></li><li><ahref="#">menuitem</a></li><li><ahref="#">menuitem</a></li><li><ahref="#">menuitem</a></li><li><ahref="#">menuitem</a></li></ul></li></ul></li></ul></body></html><scriptlanguage="Javascript">varnow=newDate();document.write("</noscript>
　　运转代码

12下一页

在几乎所有的浏览器上都可以使用。15.以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。

只看该作者 · 发表于 2015-1-16 00:22:28

网上冲浪无论你用InternetExplorer还是NetscapeNavigator，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。
复制代码另存代码</p>　　假如你利用的IE扫瞄器的话就看看上面的运转效果，这是用firefox扫瞄失掉的了局：

登录/注册后可看大图

</p>

上一页12

不管你用什么工具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB。

只看该作者 · 发表于 2015-1-18 06:27:52

AdobeDreamweaverCS5软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的AdobeCSLive在线服务AdobeBrowserLab集成。

只看该作者 · 发表于 2015-1-25 22:37:16

Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

只看该作者 · 发表于 2015-2-4 12:46:09

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

只看该作者 · 发表于 2015-2-9 22:39:31

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

只看该作者 · 发表于 2015-2-28 03:07:47

HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

仓酷云 · 发表于 2015-3-9 20:19:24

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

只看该作者 · 发表于 2015-3-17 01:10:10

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

只看该作者 · 发表于 2015-3-23 15:32:34

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来讲讲：不必script仅用css编写无穷分级弹出菜单

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子

来讲讲：不必script仅用css编写无穷分级弹出菜单

浏览过的版块