CSS三级菜单具有丰富的效果图,下面分别介绍:/* 基础样式 */ .menu { list-style: none; margin: 0; padding: 0; position: relativ
CSS三级菜单具有丰富的效果图,下面分别介绍:
/* 基础样式 */ .menu { list-style: none; margin: 0; padding: 0; position: relative; display: inline-block; } .menu ul { list-style: none; margin: 0; padding: 0; display: none; position: absolute; z-index: 1; } .menu li:hover > ul { display: block; } /* 效果图一:下拉菜单 */ .menu ul { top: 100%; left: 0; } /* 效果图二:水平菜单 */ .menu li { float: left; } /* 效果图三:垂直菜单 */ .menu ul { left: 100%; top: 0; } /* 效果图四:带有动画效果的菜单 */ .menu li { position: relative; } .menu ul { top: 0; opacity: 0; transition: opacity 0.3s ease-in-out; } .menu li:hover > ul { opacity: 1; }
以上是css三级菜单的各种效果图,可以根据自己的需求进行选择使用。
粉丝
0
关注
0
收藏
0