<!DOCTYPE html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css多級菜單向右展開</title> <style> *{margin: 0 auto;padding: 0} .nav-wrapper{width: 100px;} .nav-wrapper ul a{font-family: '微軟雅黑';font-size: 14px;color: #333;text-decoration: none;} .nav-wrapper ul a:hover{color: #000;text-decoration: none;} .nav-wrapper ul li{width: 100px;height: 35px;line-height: 35px;text-align: center;position: relative;} .nav-wrapper ul li:hover{background: #c1c1c1;} .nav-wrapper ul{width: 100px;height: auto;position: absolute;background: #DADADA;list-style: none;} .nav-wrapper .nav1{position: static !important;} .nav-wrapper ul.nav2{left: 99px;top: 0;display: none;} .nav-wrapper .nav1 .li1:hover ul.nav2{display: block;background: #c1c1c1;} </style></head><body><!--代碼部分--><!-- 歡迎來到大峽穀 --><div class="nav-wrapper"> <ul class="nav1"> <li class="li1"><a href="#">一成</a> <ul class="nav2"> <li class="li2"><a href="#">輪子媽</a></li> <li class="li2"><a href="#">維克托</a></li> </ul> </li> <li class="li1"><a href="#">溫bb</a> <ul class="nav2"> <li class="li2"><a href="#">薇恩</a></li> <li class="li2"><a href="#">盲僧</a></li> </ul> </li> <li class="li1"><a href="#">天翔</a> <ul class="nav2"> <li class="li2"><a href="#">鱷魚</a></li> <li class="li2"><a href="#">小炮</a></li> </ul> </li> <li class="li1"><a href="#">顧研</a> <ul class="nav2"> <li class="li1"><a href="#">火女</a></li> <li class="li1"><a href="#">石頭人</a></li> </ul> </li> </ul></div></body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
