Maison > Article > développement back-end > Comment implémenter le menu déroulant php et les colonnes à plusieurs niveaux ? (Code test réel)
Comment implémenter le menu déroulant php et les colonnes à plusieurs niveaux ? (Code test réel)
- 藏色散人original
- 2018-08-09 14:11:054282parcourir
Dans la construction de sites Web, la barre de navigation affiche généralement une colonne déroulante. L'implémentation PHP de cette fonction n'est pas si simple et nécessite une certaine réserve de connaissances liées aux bases de données et à PHP. Cet article va donc vous présenter l'implémentation fonctionnelle du menu déroulant secondaire PHP de manière simple afin que vous puissiez le comprendre et l'apprendre.
Cette méthode simple et facile à comprendre est principalement implémentée via du code html et css. Des exemples spécifiques de code de menu déroulant php sont les suivants :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">笔记本电脑</a>
<ul>
<li><a href="#">索尼</a> </li>
<li><a href="#">联想</a> </li>
</ul>
</li>
<li><a href="">摄像机</a>
<ul>
<li><a href="#">松下</a> </li>
<li><a href="#">佳能</a> </li>
</ul>
</li>
<li><a href="">联系我们</a></li>
</ul>
</div>
</body>
</html>style. Le code .css est le suivant :
<style>
*{margin:0;padding: 0;list-style: none;text-decoration: none;}
#nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;}
ul{background: #aaa}
ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}
ul li:hover{background: #cea;}
ul li ul li{float: none;}
/*关键一：将二级菜单设置为display：none;*/
ul li ul{position: absolute;top:40px;left: 0; display: none;}
ul li ul li:hover{background: red;}
/*关键二：在划过二级菜单从属的一级菜单时，设置为display:block;*/
ul li:hover ul{display: block;}
</style>
Cet article présente principalement comment implémenter le menu déroulant secondaire PHP d'une manière simple. J'espère qu'il sera utile. à des amis dans le besoin.
[Recommandations de contenu associé]
Barre de navigation de développement PHP menu déroulant secondaire code complet
Barre de navigation de développement PHP liste déroulante secondaire- page HTML du menu déroulant
Comment lire la base de données avec le menu déroulant php
Développement PHP Barre de navigation menu déroulant secondaire Style CSS
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!