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>
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!