导航在网站上占有极重要的地位，table时代的菜单都是用若干个td并排显示而成。
现在，我们可以用语义化的标签，如li来完成。
菜单一：
new document *{margin:0px; padding:0px;font-family:verdana;} ul { list-style:none; font-size:10px; } li ul { display:none; } #nav li { text-align:center; margin:3px; width:100px; border:solid 1px #ccc; position:relative; padding:6px; display:block; } #nav li ul{position:absolute;top:-4px;left:112px;} #nav li ul li { padding:5px 6px 5px 5px; } #nav li ul li a { display:block; width:100px; text-decoration:none; border:solid 1px #fff; } #nav li a:hover { background:#efefef; border:solid 1px #ccc; text-indent:30%; } #nav li:hover ul,#nav li.over ul { display:block; border:none; } Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link
list-style:none;是去掉列表符号
#nav li下的ul要以li为标准进行绝对定位，这点很重要。
因IE不支持#nav li:hover ul，所以写了一个简单的js来实现，其目的只是给#nav li添加一个mouseover与mouseout事件，
动态改变它的cssName。
菜单二：
new document *{margin:0px; padding:0px;font-family:verdana;} ul { list-style:none; font-size:10px; } li ul { display:none; } #nav { width:700px; } #nav li { float:left; width:100px; text-align:center; margin:3px; border:solid 1px #003399; cursor:help; padding:6px; } #nav li ul li { border:none; padding:0; margin:0px; } #nav li ul li a { text-decoration:none; display:block; margin:1px; padding:6px 0px; width:97px; } #nav li ul li a:hover { background:#efefef; border:solid 1px #ccc; margin:0px; } #nav li:hover ul,#nav li.over ul { display:block; border:none; } Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link
立即学习“前端免费学习笔记（深入）”；
这二个简单的菜单主要是对Box模型的理解，最开始我也被box弄糊涂。注意margin、padding、border。
文章来源: http://www.lemongtree.com/Archives/css_menu.aspx
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3088964.html
