Implement drop-down menu with HTML+CSS

This time I will bring you how to use HTML+CSS to implement drop-down menu, and what are the precautions to use HTML+CSS to implement drop-down menu. The following is a practical case, let’s take a look. one time.

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语言
                   
                       
             
• 个人中心
             
• 关于我们
         

                   

Rendering:

Believe it or not After reading the case in this article, you have mastered the method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the use of Selector in CSS

Detailed explanation of the filter attribute of CSS3

Detailed explanation of the special usage skills of CSS margin

The above is the detailed content of Implement drop-down menu with HTML+CSS. For more information, please follow other related articles on the PHP Chinese website!