Le contenu de cet article concerne le code CSS permettant de réaliser le menu cliqué pour développer vers la droite pour afficher le contenu. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .
<!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>
Recommandations associées :
Menu de navigation CSS, implémentation du menu à trois niveaux code_Menu de navigation
css survol Drop -down menu_html/css_WEB-ITnez
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!