具有特定布局的css3多级导航

我一直在网络上拼命搜索纯css3菜单，其布局如下：

有什么想法吗？

---

谢谢

您需要使用嵌套的

s和

s。当你将鼠标悬停在菜单上（我假设这就是你想要的）时，要使菜单展开，你首先要隐藏第二级和第三级的

ul

s（

display:none

），然后只在它们的父级

li

悬停在上面时才显示它们（

li:hover>ul{display:block；}

）

总而言之，它看起来是这样的：

HTML:

我还制作了一个JSFiddle，以便您可以看到它的实际应用：

可能是一个起点-

<nav>
    <ul class='level0'>
        <li><a href='#'>ITEM1</a>
            <ul class='level1'>
                <li><a href='#'>Level1 - Item1</a>
                    <ul class='level2'>
                        <li><a href='#'>Level2 - Item1</a></li>
                        <li><a href='#'>Level2 - Item2</a></li>
                        <li><a href='#'>Level2 - Item3</a></li>
                        <li><a href='#'>Level2 - Item4</a></li>
                    </ul>
                </li>

                <!-- more li's -->

            </ul>
        </li>

        <!-- more li's -->

    </ul>
</nav>

nav {
    position:absolute;
}

.level0,
.level1,
.level2 {
    width:270px;
    padding:0;
    margin:0;
    position:absolute;
    top:0;
    list-style:none;
}

.level1,
.level2 {
    left:270px;
    display:none;
}

.level0 {
    left:0px;
}

.level0 {
    background:#fafafa;
}

.level0 li:hover {
    background:#ddd;
    color:#f00;
}

.level1 {
    background:#ddd;
}

.level1 li:hover {
    background:#bbb;
    color:#f00;
}

.level2 {
    background:#bbb;
}

.level2 li:hover {
    background:#a2a2a2;
    color:#f00;
}

nav li {
    display:block;
    font-weight:normal;
    font-family:sans-serif;
    font-size:13px;
    color:#000;
}

li:hover>ul {
    display:block;
}

li a {
    display:block;
    padding:12px;
    color:inherit;
    text-decoration:none;
}