<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多级下拉菜单所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)