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