具有垂直子菜单的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;
}