Chinaunix首页 | 论坛 | 博客
  • 博客访问: 335894
  • 博文数量: 95
  • 博客积分: 2030
  • 博客等级: 大尉
  • 技术积分: 738
  • 用 户 组: 普通用户
  • 注册时间: 2006-08-12 09:11
文章分类

全部博文(95)

文章存档

2018年(4)

2017年(16)

2016年(61)

2015年(1)

2013年(3)

2006年(10)

我的朋友

分类: Html/Css

2013-01-31 21:50:09

效果图

 


一 创建垂直3级菜单 

  (1)   利用CSS3方式,先设置一级的 UL为相对于我

.one_level_li{


    position:relative;
}
 (2) 设置一级LI下的UL:二级 ,则UL的下的li自动跟随UL属性




.two_level_ul{
 position:absolute; 位置相对li的位置


 margin-left:175px; 设置他的位置,向右移动175px,是菜单的宽度


 margin-top:-1em;   设置X轴,向上移动一个行距


 visibility:hidden; 默认不显示


}
 (3) 设置二级下LI的UL:三级 ,属性同上

.three_level_ul{



 position:absolute;


 margin-left:175px;


 margin-top:-1em;


 visibility:hidden; 


}


(4) 鼠标hover li元素时 设置二级的ul显示


li:hover .two_level_ul{


 visibility:visible; 


}


(5)鼠标hover 二级才的LI时, 设置二级的ul显示


.two_level_li:hover .three_level_ul{


 visibility:visible; 


}
 








CosmoFarmer



  



阅读(1021) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册