最新消息:文章中包含代码时,请遵守代码高亮规范!

不使用jQuery,也能实现三级菜单制作(:hover)

HTML+CSS ada 2304浏览 0评论

使用css中的:hover制作菜单,有一点需要注意的是在设计菜单时,要先设计一级菜单(使用position: relative;),使用同样样式,二级菜单div{display: none;} ,再设计二级菜单div后的ul位置(使用position: absolute;)。

<!DOCTYPE html>
 <html lang="zh-cn">
 <head>
 <meta charset="UTF-8">
 <title>三级菜单的制作</title>
 <style>
 * {padding: 0;margin: 0;}
 body {background: #eee; font-size: 14px;}
 a {padding:10px 15px;text-decoration: none;color: #fff;background:#008aff;}
 .menu {height: 30px;line-height: 30px;}
 .menu li {float: left;list-style:none;padding: 0 15px;}
 .menu li a:hover {color: red; background: #6dd1da;}
 .sub_menu {position: relative;}
 .sub_menu li {float: none;padding: 0}
 .sub_menu li a {display: block;height: 10px;line-height: 10px;text-align: center;border-bottom: 1px solid #eee;}
 .sub_menu {display: none;}
  .menu li:hover .sub_menu{display: block;}
 .sub_menu2 {display: none;}
 .sub_menu21 {position: absolute;top:0px;left: 71px;}
 .sub_menu22 {position: absolute;top:31px;left: 71px;}
 .sub_menu23 {position: absolute;top:62px;left: 71px;}
 .sub_menu24 {position: absolute;top:93px;left: 71px;}
 .menu li:hover .sub_menu li:hover .sub_menu2 {display: block;}
 </style>
 </head>
 <body>
 <div class="contain">
 <ul class="menu">
 <li><a href="javascript:;">菜单一</a>
 <div>
 <ul class="sub_menu">
 <li><a href="javascript:;">111111</a>
 <div class="sub_menu2">
 <ul class="sub_menu21">
 <li><a href="javascript:;">111111</a></li>
 <li><a href="javascript:;">222</a></li>
 <li><a href="javascript:;">333</a></li>
 <li><a href="javascript:;">444</a></li>
 </ul>
 </div>
 </li>
 <li><a href="javascript:;">222</a>
 <div class="sub_menu2">
 <ul class="sub_menu22">
 <li><a href="javascript:;">111111</a></li>
 <li><a href="javascript:;">222</a></li>
 <li><a href="javascript:;">333</a></li>
 <li><a href="javascript:;">444</a></li>
 </ul>
 </div>
 </li>
 <li><a href="javascript:;">333</a>
 <div class="sub_menu2">
 <ul class="sub_menu23">
 <li><a href="javascript:;">111111</a></li>
 <li><a href="javascript:;">222</a></li>
 <li><a href="javascript:;">333</a></li>
 <li><a href="javascript:;">444</a></li>
 </ul>
 </div>
 </li>
 <li><a href="javascript:;">444</a>
 <div class="sub_menu2">
 <ul class="sub_menu24">
 <li><a href="javascript:;">111111</a></li>
 <li><a href="javascript:;">222</a></li>
 <li><a href="javascript:;">333</a></li>
 <li><a href="javascript:;">444</a></li>
 </ul>
 </div>
 </li>
 </ul>
 </div>
 </li>
 <li><a href="javascript:;">菜单二</a>
 </li>
 <li><a href="javascript:;">菜单三</a>
 </li>
 <li><a href="javascript:;">菜单四</a>
 </li>
 </ul>
 </div>
 </body>
 </html>

 

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/16582.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者ada的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!