欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML5实例之CSS3制作的三级下拉菜单(代码)

程序员文章站 2022-04-01 19:23:23
html5实例之css3制作的三级下拉菜单(代码) 三级下拉菜单 p{margin:30px 180px;} ul{list-style:none;padding:...

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;}