首页用hmtl写小米商城导航栏下拉框

用hmtl写小米商城导航栏下拉框

时间: 2023-07-18 22:42:29 浏览: 139

好的，以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <title>小米商城导航栏下拉框</title> <style> /* 设置下拉框的样式 */ .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; z-index: 1; } .dropdown:hover .dropdown-content { display: block; } /* 设置导航栏链接的样式 */ .nav-link { display: inline-block; padding: 12px 16px; text-decoration: none; color: #333; } .nav-link:hover { background-color: #f5f5f5; } </style> </head> <body> <nav>  <a class="nav-link" href="#">手机</a> <a class="nav-link" href="#">电视</a> <a class="nav-link" href="#">笔记本</a>  <div class="dropdown"> <a class="nav-link" href="#">智能硬件</a> <div class="dropdown-content"> <a class="nav-link" href="#">智能家居</a> <a class="nav-link" href="#">智能出行</a> <a class="nav-link" href="#">智能健康</a> </div> </div> <a class="nav-link" href="#">服务</a> <a class="nav-link" href="#">社区</a> </nav> </body> </html> ``` 这段代码实现了一个简单的小米商城导航栏，下拉框是通过 HTML 和 CSS 实现的。具体来说，是通过设置一个 `dropdown` 类来定义下拉框的样式，然后在导航栏链接中嵌套一个 `dropdown` 类的 `div` 元素来实现下拉框。同时，通过设置 `:hover` 伪类来实现鼠标悬停时下拉框的显示。

阅读全文