解决方法
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; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。