Maison > Article > interface Web > code CSS pour implémenter le menu contextuel pour développer vers la droite pour afficher le contenu
code CSS pour implémenter le menu contextuel pour développer vers la droite pour afficher le contenu
- 不言original
- 2018-08-20 10:55:212676parcourir
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!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn