HTML制作简易百度下拉菜单栏

最新推荐文章于 2022-09-20 22:33:33 发布

Gordon_Chao

最新推荐文章于 2022-09-20 22:33:33 发布

阅读量606

点赞数 2

分类专栏：前端学习文章标签： css html javascript

本文链接：https://blog.csdn.net/m0_64645111/article/details/124765288

版权

前端学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

效果图：

代码↓

html

    <div class="kok">
      <ul class="han">
          <li><a href="#" class="set">设置</a>
           <ul class="jong">
               <li><a href="#">搜索设置</a></li>
               <li><a href="#">高级搜索</a></li>
               <li><a href="#">关闭预测</a></li>
               <li><a href="#">隐私设置</a></li>
               <li><a href="#">开启热搜</a></li>
           </ul>
          </li>
      </ul>
    </div>

css

  div ul {
            list-style-type: none;
            /* 清楚list自带属性 */
        }
        a {
            text-decoration: none;
            font-size: 13px;
            color:#222222;
            display:inline-block;
            /* 设置字体大小 颜色 清楚下划线 */
            
        }
        a:hover {
            color:#315efb;
        }
       
        .kok .han ul 
        {
            
            background-color: #ffffff;
            text-align: center;
            box-shadow:0 1px 10px -1px rgba(0,0,0,.3);
            /* 为盒子添加阴影效果 */
            margin:16px;
            border-radius:15px;
            /* 为盒子添加圆角效果 */

            display:none;
            /* 隐藏盒子 */
        }
        .jong{
            width: 60px;
            height: 105px;
            padding:15px;
            /* 为盒子设置尺寸 */
        }
        .han:hover .jong {
           display: block;
           /* 设置盒子为hover显示 */
        }
        .set {
            position: relative;
            left:60px;
            /* 调整设置两字位置 */
        }