CODEWITHSUNDEEP
htmlcss
jay_t55
jay_t55

Reputation: 11652

A CSS Horizontal Menu with Vertical SubMenu

I have a horizontal menu, and it contains another menu which is vertical. It should look like below, but I have been unsuccessful. Can someone please help? I have tried so many things but I am just not sure how to get it this way:

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>

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

Upvotes: 3

Views: 11235

Answers (1)

edonbajrami
edonbajrami

Reputation: 2206

The HTML code must be:

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

and the CSS must be:

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

Upvotes: 5

Related Questions