Implémenter le menu déroulant avec HTML+CSS

Cette fois, je vais vous présenter le menu déroulant utilisant HTML+CSS Quelles sont les précautions concernant l'utilisation de HTML+CSS pour implémenter le menu déroulant ? est un cas pratique. Jetons un coup d'œil une fois.

Code :

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
    
    
<meta>    
<title>下拉框</title>    
<style>    
*{ margin:0px; padding:0px;}    
#nav{ width:600px; height:40px; margin:0 auto;}    
#nav ul{ list-style:none;}    
#nav ul li{ float:left; line-height:40px; text-align:center; position:relative;}    
#nav ul li a{ text-decoration:none; color:#000; display:block;padding:0px 10px;}    
#nav ul li a:hover{ color:#FFF; background:#333}    
#nav ul li ul{ position:absolute; display:none;}    
#nav ul li ul li{ float:none; line-height:30px; text-align:left;}    
#nav ul li ul li a{ width:100%;}    
#nav ul li ul li a:hover{ background-color:#06f;}    
#nav ul li:hover ul{ display:block}    
</style>    
    
<p>    
    </p>

             
• 首页
             
• 学习中心                 
                       
  • java
                       
  • jQuery
                       
  • C++
                       
  • C语言
                   
                       
             
• 个人中心
             
• 关于我们
         

                   

Rendu :

I Je pense que vous maîtrisez la méthode après avoir lu le cas présenté dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Explication détaillée de l'utilisation du sélecteur CSS

Explication détaillée de l'attribut de filtre de CSS3

Explication détaillée des techniques spéciales d'utilisation de la marge 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!