HTML5实例之CSS3制作的三级下拉菜单(代码)
程序员文章站
2022-04-01 19:23:23
html5实例之css3制作的三级下拉菜单(代码)
三级下拉菜单
p{margin:30px 180px;}
ul{list-style:none;padding:...
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制作的三级下拉菜单(代码)
-
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
-
HTML5实例之javaScript制作水平下拉菜单
-
纯CSS3制作页面切换效果的实例代码
-
10个优秀的 HTML5 & CSS3 下拉菜单制作教程_html/css_WEB-ITnose
-
实现ajax三级联动下拉菜单的实例代码
-
CSS3实现的横向二级下拉菜单代码实例_html/css_WEB-ITnose
-
10个优秀的 HTML5 & CSS3 下拉菜单制作教程_html/css_WEB-ITnose
-
利用CSS3制作简单的3d半透明立方体图片实例代码
-
CSS3实现的横向二级下拉菜单代码实例_html/css_WEB-ITnose