html – 纯CSS多级下拉菜单
发布时间:2020-12-14 21:49:19 所属栏目:资源 来源:网络整理
导读:我以前没有做过多层次的纯CSS下拉菜单,但是我现在正在寻找一种最干净的方法。当我搜索这个在线我找到了很多解决方案是4-5岁,我不知道是否有更好的方法来实现这个比做一些事情 like this。 解决方法 HTML ul class="top-level-menu" lia href="#"About/a/li
我以前没有做过多层次的纯CSS下拉菜单,但是我现在正在寻找一种最干净的方法。当我搜索这个在线我找到了很多解决方案是4-5岁,我不知道是否有更好的方法来实现这个比做一些事情
like this。
解决方法
HTML
<ul class="top-level-menu"> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li> <a href="#">Offices</a> <ul class="second-level-menu"> <li><a href="#">Chicago</a></li> <li><a href="#">Los Angeles</a></li> <li> <a href="#">New York</a> <ul class="third-level-menu"> <li><a href="#">Information</a></li> <li><a href="#">Book a Meeting</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Jobs</a></li> </ul> </li> <li><a href="#">Seattle</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> CSS /* Menu Styles */ .third-level-menu { position: absolute; top: 0; right: -150px; width: 150px; list-style: none; padding: 0; margin: 0; display: none; } .third-level-menu > li { height: 30px; background: #999999; } .third-level-menu > li:hover { background: #CCCCCC; } .second-level-menu { position: absolute; top: 30px; left: 0; width: 150px; list-style: none; padding: 0; margin: 0; display: none; } .second-level-menu > li { position: relative; height: 30px; background: #999999; } .second-level-menu > li:hover { background: #CCCCCC; } .top-level-menu { list-style: none; padding: 0; margin: 0; } .top-level-menu > li { position: relative; float: left; height: 30px; width: 150px; background: #999999; } .top-level-menu > li:hover { background: #CCCCCC; } .top-level-menu li:hover > ul { /* On hover,display the next level's menu */ display: inline; } /* Menu Link Styles */ .top-level-menu a /* Apply to all links inside the multi-level menu */ { font: bold 14px Arial,Helvetica,sans-serif; color: #FFFFFF; text-decoration: none; padding: 0 0 0 10px; /* Make the link cover the entire list item-container */ display: block; line-height: 30px; } .top-level-menu a:hover { color: #000000; } 我还组织了一个可用于演奏HERE的现场演示 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |