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

Question

我一直在网上搜索一个纯css3菜单，其中包含以下布局：

任何想法？ 感谢

Answer 1

您需要使用嵌套的<ul>和<li>。当您将鼠标悬停在菜单上时（我假设您想要的是这样），您可以从第二级和第三级ul隐藏（display:none）开始，然后只显示当他们的父li悬停在li:hover>ul { display:block; }）上时。{/ p>

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

HTML：

<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>

CSS：

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;
}

我还制作了一个JSFiddle，以便您可以看到它的实际效果：http://jsfiddle.net/vj2vh/