CSS教程之CSS网页结构进门教程14：纵向下拉及多级弹出式菜单

只看该作者 · 发表于 2015-1-16 10:39:01

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

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

x

通常把清除浮动写成单独的
放在所有浮动div的最下方。

本站2010年9月新增《十天学会web尺度（div+CSS）》系列教程，接待进修！
学完了上节教程，我想关于这于这节的进修就简单很多了。
横向菜单是经由过程div及JavaSprict完成下拉把持，纵向菜单呢？谜底是一定的。我们如今要做的就是一个纵向菜单，css代码：

ul{margin:0;padding:0;list-style:none;width:120px;border-bottom:1pxsolid#ccc;font-size:12px;}
ulli{position:relative;}
liul{position:absolute;left:119px;top:0;display:none;}
ullia{width:108px;display:block;text-decoration:none;color:#666666;background:#fff;padding:5px;border:1pxsolid#ccc;border-bottom:0px;}
ullia:hover{background-color:#ddd;}
/*办理ul在IE下显现不准确的成绩*/
*htmlulli{float:left;height:1%;}
*htmlullia{height:1%;}
/*end*/
li:hoverul,li.overul{display:block;}

css代码的编写基础上坚持了与横导游航不异的思绪，分歧的是，为了完成导航中的子导航与主导航在完成鼠标交互的同时，坚持其绝对地位分歧，我们利用了对ulli{}利用了position:relative;使其定位体例转为绝对定位。而对liul{}即子导航接纳了position:absolute;相对导航的相对定位体例，了其鼠标交互后的地位分歧。
大概您已发明，这里在css代码未尾增添了一段正文的界说*htmlulli与*htmlullia。这里用到的是CSShack，这是由于分歧的扫瞄器对代码的剖析分歧，用来完成在各扫瞄器上显现不异的效果而利用的。这段代码只要IE扫瞄器能剖析，别的扫瞄器置若罔闻。有关csshack的更多教程，请在www.ckuyun.com网站外调找。
本例的终极显现效果以下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>下拉纵向及多级弹出式菜单www.ckuyun.com</title><scripttype="text/javascript"><![CDATA[//><!]]></script><style>ul{margin:0;padding:0;list-style:none;width:120px;border-bottom:1pxsolid#ccc;font-size:12px;}ulli{position:relative;}liul{position:absolute;left:119px;top:0;display:none;}ullia{width:108px;display:block;text-decoration:none;color:#666666;background:#fff;padding:5px;border:1pxsolid#ccc;border-bottom:0px;}ullia:hover{background-color:#ddd;}/*办理ul在IE下显现不准确的成绩aa25.cn*/*htmlulli{float:left;height:1%;}*htmlullia{height:1%;}/*end*/li:hoverul,li.overul{display:block;}</style></head><body><ulid="nav"><li><ahref="">文章</a><ul><li><ahref="">CSS教程</a></li><li><ahref="">DOM教程</a></li><li><ahref="">XML教程</a></li><li><ahref="">Flash教程</a></li></ul></li><li><ahref="">参考</a><ul><li><ahref="">XHTML</a></li><li><ahref="">XML</a></li><li><ahref="">CSS</a></li></ul></li><li><ahref="">BLOG</a><ul><li><ahref="">全体</a></li><li><ahref="">网页手艺</a></li><li><ahref="">UI手艺</a></li><li><ahref="">FLASH手艺</a></li></ul></li><li><ahref="">摇滚</a></li><li><ahref="">纯音乐</a></li><li><ahref="">古典金曲</a></li><li><ahref="">影戏原声</a></li></ul></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
以下的内容是一位网友的DIVCSS编码笔记，是值得大家学习的，在实际工作与开发中，将工作中的点滴记录下来，回首这些过往，你也会收获很多

只看该作者 · 发表于 2015-1-18 07:44:32

由CS4版本开始，则转用WebKit排版引擎（亦即GoogleChrome和AppleSafari浏览器所用的排版引擎）作为网页预览。

只看该作者 · 发表于 2015-1-26 16:36:01

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

只看该作者 · 发表于 2015-2-4 20:47:52

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

只看该作者 · 发表于 2015-2-10 10:09:22

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

只看该作者 · 发表于 2015-3-1 10:14:37

不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

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

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

只看该作者 · 发表于 2015-3-17 09:34:25

俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

只看该作者 · 发表于 2015-3-24 06:33:11

学Dreamweaver技术的过程其实是一个增加信心的过程。

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

[DIV+CSS] CSS教程之CSS网页结构进门教程14：纵向下拉及多级弹出式菜单

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

相关帖子