CSS实现无限极菜单-云静博客

#### 示例：
![](http://blog.iyunj.cn/upload/img/20230203/b710db4ba86eb8f672976c3a72b0e059.png)

#### 代码如下：

```html
<html>
<head>
 <title>无限极菜单</title>
 <meta charset="utf-8">
 <style type="text/css">

a {
            text-decoration: none;
        }

.icon.icon-down::after{
            content: '\25BC';
        }

.icon.icon-right::after{
            content: '\25BA';
        }

/* top-menu start */
        .container > .top-menu {
            padding: 0 20px;
            display: flex;
            float: left;
            position: relative;
            z-index: 999;
            white-space: nowrap;
        }

.container > .top-menu .icon,
        .container > .top-menu .icon {
            font-size: 12px;
        }

.container > .top-menu .top-menu-item {
            display: flex;
            position: relative;
        }

.container > .top-menu > .top-menu-item {
            margin-right: 20px;
            flex-direction: column;
        }

.container > .top-menu > .top-menu-item:last-child {
            margin: 0;
        }

.container > .top-menu .top-menu-item a {
            line-height: 45px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

.container > .top-menu .top-menu-item a .desc .icon,
        .container > .top-menu .top-menu-item a .desc .icon {
            margin-right: 5px;
        }

.container > .top-menu .top-menu-sub {
            display: none;
            background: #fff;
            border-radius: 2px;
            box-shadow: 0 2px 4px rgb(0 0 0 / 12%);
            padding: 0;
        }

.container > .top-menu > .top-menu-item > a .icon-down {
            margin-top: -2px;
            margin-left: 5px;
        }

.container > .top-menu .top-menu-item .top-menu-sub .top-menu-item {
            min-width: 100px;
        }

.container > .top-menu .top-menu-sub .top-menu-item:hover {
            background-color: #f6f6f6;
        }

.container > .top-menu .top-menu-sub .top-menu-item a {
            line-height: 36px;
            padding: 0 20px;
        }

.container > .top-menu .top-menu-sub .top-menu-item a {
            color: #333;
            flex: 1;
        }

.container > .top-menu .top-menu-item:hover > .top-menu-sub {
            display: block;
            position: absolute;
        }

.container > .top-menu > .top-menu-item:hover > a {
            color: #009688;
        }

.container > .top-menu > .top-menu-item:hover > a .icon-down {
            transform: rotatex(180deg);
        }

.container > .top-menu > .top-menu-item:hover > .top-menu-sub {
            top: 45px;
        }

.container > .top-menu > .top-menu-item .top-menu-item:hover > a {
            background: #009688;
            color: #fff;
            border-color: #04564e;
        }

.container > .top-menu > .top-menu-item .top-menu-item:hover > .top-menu-sub {
            left: 100%;
        }

/* top-menu end */
 </style>
</head>
<body>
<div class="container">
 <ul class="top-menu">
 <li class="top-menu-item">
 <a href="">
 菜单1
 
 </a>
 <ul class="top-menu-sub">
 <li class="top-menu-item">
 <a href="">
 菜单1-1
 </a>
 </li>
 <li class="top-menu-item">
 <a href="">
 菜单1-2
 
 </a>
 <ul class="top-menu-sub">
 <li class="top-menu-item">
 <a href="">
 菜单1-2-1
 </a>
 </li>
 </ul>
 </li>
 <li class="top-menu-item">
 <a href="">
 菜单1-3
 </a>
 </li>
 <li class="top-menu-item">
 <a href="">
 菜单1-4
 
 </a>
 <ul class="top-menu-sub">
 <li class="top-menu-item">
 <a href="">
 菜单1-4-1
 </a>
 </li>
 <li class="top-menu-item">
 <a href="">
 菜单1-4-1-1
 
 </a>
 <ul class="top-menu-sub">
 <li class="top-menu-item">
 <a href="">
 菜单1-4-1-1-1
 </a>
 </li>
 </ul>
 </li>
 </ul>
 </li>
 </ul>
 </li>
 <li class="top-menu-item">
 <a href="">
 菜单2
 </a>
 </li>
 <li class="top-menu-item">
 <a href="">
 菜单3
 </a>
 </li>
 </ul>
</div>
</body>
</html>
```

CSS实现无限极菜单

相关推荐

评论