html - 带有垂直子菜单的 CSS 水平菜单

Question

我有一个水平菜单，它包含另一个垂直菜单。它应该如下所示，但我没有成功。有人可以帮忙吗？我已经尝试了很多东西，但我只是不确定如何以这种方式获得它:

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

Answer 1

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