html – 纯CSS多级下拉菜单

html – 纯CSS多级下拉菜单,第1张

概述我以前没有做过多层次的纯CSS下拉菜单,但是我现在正在寻找一种最干净的方法。当我搜索这个在线我找到了很多解决方案是4-5岁,我不知道是否有更好的方法来实现这个比做一些事情 like this。 HTML <ul class="top-level-menu"> <li><a href="#">About</a></li> <li><a href="#">Services</a></l 我以前没有做过多层次的纯CSS下拉菜单,但是我现在正在寻找一种最干净的方法。当我搜索这个在线我找到了很多解决方案是4-5岁,我不知道是否有更好的方法来实现这个比做一些事情 like this。解决方法 HTML
<ul >    <li><a href="#">About</a></li>    <li><a href="#">Services</a></li>    <li>        <a href="#">Offices</a>        <ul >            <li><a href="#">Chicago</a></li>            <li><a href="#">Los Angeles</a></li>            <li>                <a href="#">New York</a>                <ul >                    <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的现场演示

总结

以上是内存溢出为你收集整理的html – 纯CSS多级下拉菜单全部内容,希望文章能够帮你解决html – 纯CSS多级下拉菜单所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1115119.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-29
下一篇 2022-05-29

发表评论

登录后才能评论

评论列表(0条)

保存