HTML5实例之CSS3制作的三级下拉菜单(代码)
导读:收集整理的这篇文章主要介绍了html5教程-HTML5实例之CSS3制作的三级下拉菜单(代码),觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 HT...
收集整理的这篇文章主要介绍了html5教程-HTML5实例之CSS3制作的三级下拉菜单(代码),觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 HTML5实例之CSS3制作的三级下拉菜单(代码)
三级下拉菜单
p{ margin:30px 180px; } ul{ list-style:none; padding:0px; } ul li{ float:left; posITion:relative; } ul li a{ text-decoration:none; background:#a40000; display:block; line-height:40px; text-align:center; padding:0px 10px; color:white; margin-right:1px;
} ul li a:hover{ background:#f90; } ul li ul li,ul li ul li ul li{ float:none; margin-top:1px; } ul li ul li ul{ position:absolute; left:100%; top:-1px; width:100px; } ul li ul { display:none; } ul li:hover ul{ display:block; } ul li:hover ul li ul{ display:none; } ul li ul li:hover ul{ display:block; }
HTML5实例之CSS3制作的三级下拉菜单(代码)
三级下拉菜单
p{ margin:30px 180px; } ul{ list-style:none; padding:0px; } ul li{ float:left; position:relative; } ul li a{ text-decoration:none; background:#a40000; display:block; line-height:40px; text-align:center; padding:0px 10px; color:white; margin-right:1px;
} ul li a:hover{ background:#f90; } ul li ul li,ul li ul li ul li{ float:none; margin-top:1px; } ul li ul li ul{ position:absolute; left:100%; top:-1px; width:100px; } ul li ul { display:none; } ul li:hover ul{ display:block; } ul li:hover ul li ul{ display:none; } ul li ul li:hover ul{ display:block; }
觉得可用,就经常来吧! 欢迎评论哦! html5教程,巧夺天工,精雕玉琢。小宝典献丑了!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: HTML5实例之CSS3制作的三级下拉菜单(代码)
本文地址: https://pptw.com/jishu/587164.html