7.19 二级菜单 css实现方式小案例
纯css样式展示导航
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>二级菜单展示效果</title> </head> <style> ul,li{ padding: 0; margin: 0; list-style: none; } a{text-decoration:none; color: #fff; font-size: 14px;} a:hover{ color: rgba(12,253,255,0.88); font-size: 16px; } .sy-nav{ width: 600px; height: 50px; background-color: black; line-height: 50px; } .main-menu li{ float: left; line-height: 50px; width: 130px; text-align: center; position: relative; /*定位父级*/ } ul li :hover{ display: block; background-color: #0000FF; } .sub-menu{ width: 260px; height: 300px; background-color: #1E9FFF; position: relative; top: 10px; left: 0; /*默认不显示*/ display: none; } .main-menu li:hover .sub-menu{ display: block; } </style> <body> <div class="sy-nav"> <ul class="main-menu"> <li><a href="">我的收藏</a></li> <li><a href="">我的产品</a> <ul class="sub-menu"> <li><a href="">护肤用品</a></li> <li><a href="">洗浴用品</a></li> <li><a href="">***用品</a></li> <li><a href="">***用品</a></li> </ul> </li> <li><a href="">我的服务</a> <ul class="sub-menu"> <li><a href="">护肤用品</a></li> <li><a href="">洗浴用品</a></li> <li><a href="">***用品</a></li> <li><a href="">***用品</a></li> </ul> </li> <li><a href="">在线咨询</a></li> </ul> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例