【菜牛牛】淘宝网首页顶部下拉菜单CSS版（非javascript）

最新推荐文章于 2022-08-10 22:12:08 发布

菜牛牛

最新推荐文章于 2022-08-10 22:12:08 发布

阅读量796

点赞数 1

分类专栏：前端设计文章标签：下拉菜单淘宝首页菜单淘宝菜单 css下拉菜单 css菜单

本文链接：https://blog.csdn.net/eososo/article/details/90239375

版权

这篇博客分享了如何使用纯CSS实现淘宝网首页顶部的下拉菜单效果，无需JavaScript。作者提供了HTML和CSS代码，并提供了效果演示页面及源码下载链接，邀请读者发现和优化代码。

摘要由CSDN通过智能技术生成

【菜牛牛】淘宝网首页顶部下拉菜单CSS版（非javascript）
大家发现我的错误代码，或者有更优化的代码，请留言告诉我！

html文件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="keywords" content="菜牛牛,CSS实现的下拉菜单">
        <meta name="description" content="淘宝网首页顶部下拉菜单CSS版（非javascript）">
        <meta name="author" content="菜牛牛,70177108@qq.com">
        <title>淘宝网首页顶部下来菜单CSS版（非javascript）</title>
        <link rel="stylesheet" type="text/css" href="css/menu.css">
    </head>
    <body>
      <div id="header">
        <div id="taoDropMenu">
          <div id="taoDropMenuLeft">
            <div class="taoDropMenuDown">
              <div class="taoDropMenuBtn">中国大陆</div>
              <div class="taoDropMenuContent" style="width:280px;height:280px;overflow-y:scroll;">
                  <a href="#" class="bb">全球</a>
                  <a href="#">中国大陆</a>
                  <a href="#">香港</a>
                  <a href="#">台湾</a>
                  <a href="#">澳门</a>
                  <a href="#">韩国</a>
                  <a href="#">马来西亚</a>
                  <a href="#">澳大利亚</a>
                  <a href="#">新加坡</a>
                  <a href="#">新西兰</a>
                  <a href="#">加拿大</a>
                  <a href="#">美国</a>
                  <a href="#">日本</a>         
              </div>              
            </div>