纯HTML+CSS实战之实现带图标的二级导航菜单

最新推荐文章于 2023-11-09 15:23:01 发布

小韩同学哇

最新推荐文章于 2023-11-09 15:23:01 发布

阅读量5.8k

点赞数 8

分类专栏：从零玩转Html5前端开发

本文链接：https://blog.csdn.net/qq_41886761/article/details/86355163

版权

本文详细介绍了如何仅使用HTML和CSS技术来构建一个具有图标的二级导航菜单。通过实例代码展示，帮助读者理解实现这一功能的具体步骤和技巧。

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

效果图如上

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯CSS实现带图标的二级导航菜单</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            border: none;
            outline: none;
        }
        .menu{
            width: 600px;
            height: 60px;
            /*背景渐变颜色*/
            background: linear-gradient(to bottom,#4c4e4a 0%,#2c2d33 100%);
            /*圆角边框*/
            border-radius: 5px;
            margin: 100px auto;
        }
        .menu li{
            list-style: none;
            position: relative;
            float: left;
            height: 60px;
            line-height: 60px;
            text-align: center;
        }
        .menu li:h