這篇文章帶給大家的內容是關於css實現點擊選單向右展開顯示內容的程式碼,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
<!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>
相關建議:
css hover下拉選單_html/css_WEB-ITnose
以上是css實作點選選單向右展開顯示內容的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!