logo标签列表

一个带有垂直子菜单的CSS水平菜单

htmlcss
3

我有一个水平菜单，并且它包含另一个垂直菜单。应该看起来像下面这样，但是我一直没有成功。有人能帮忙吗？我尝试了很多方法，但是不确定如何实现：

enter image description here

                    <ul class="HorizontalList">
                        <li><a href="#">BOOKS</a>
                            <ul>
                                <li><a>item</a></li>
                                <li><a>item</a></li>
                                <li><a>item</a></li>
                            </ul>
                        </li>
                        <li><a href="#">GAMES</a>
                            <ul>
                                <li><a>item</a></li>
                                <li><a>item</a></li>
                                <li><a>item</a></li>
                            </ul>
                        </li>

                        <li><a href="#">DOWNLOADS</a>
                            <ul>
                                <li><a>item</a></li>
                                <li><a>item</a></li>
                                <li><a>item</a></li>
                            </ul>
                        </li>
                    </ul>

以下是CSS代码：

VerticalList ul {
    list-style: none;
    list-style-type: none;
}

    .VerticalList li {
        display: block;
    }

.HorizontalList ul {
    list-style: none;
    list-style-type: none;
}

.HorizontalList {
    display: inline;
}
1个回答
5
HTML代码必须是这样的：
<ul class="HorizontalList">
    <li><a href="#">BOOKS</a>
        <ul>
            <li><a>item</a></li>
            <li><a>item</a></li>
            <li><a>item</a></li>
        </ul>
    </li>
    <li><a href="#">GAMES</a>
        <ul>
            <li><a>item</a></li>
            <li><a>item</a></li>
            <li><a>item</a></li>
        </ul>
    </li>

    <li><a href="#">DOWNLOADS</a>
        <ul>
            <li><a>item</a></li>
            <li><a>item</a></li>
            <li><a>item</a></li>
        </ul>
    </li>
</ul>

并且CSS必须是：

ul {
    list-style-type:none;
}

ul li {
    display:inline-block;
    position:relative
}
ul li ul {
    position:absolute;
    top:/* vary based on the height of the li*/;
    left:0px;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接