Home/Explore/

Nested dropdowns

CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
Hover on the Patterns → Navigation to see the sub dropdowns.
  • Home
  • Patterns
    • Layout
    • Input
    • Navigation
      • Breadcrumb
      • Dropdown
      • Menu
      • Nested dropdown
    • Display
    • Feedback
  • Products
  • About
<style>
/* The root */
.p-nested-dropdowns {
    /* Border */
    border: 1px solid rgba(0, 0, 0, 0.3);
    display: flex;

    /* Reset list styles */
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.p-nested-dropdowns li {
    /* Spacing */
    padding: 8px;

    /* Used to position the sub dropdown */
    position: relative;
}

/* The sub dropdown */
.p-nested-dropdowns ul {
    /* Border */
    border: 1px solid rgba(0, 0, 0, 0.3);

    /* Hidden by default */
    display: none;

    /* Absolute position */
    left: 0;
    position: absolute;
    top: 100%;

    /* Reset styles */
    list-style-type: none;
    margin: 0;
    padding: 0;

    /* Width */
    width: 200px;
}

/* The second level sub dropdown */
.p-nested-dropdowns ul ul {
    left: 100%;
    position: absolute;
    top: 0;
}

/* Change background color of list item when being hovered */
.p-nested-dropdowns li:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Show the direct sub dropdown when hovering the list item */
.p-nested-dropdowns li:hover > ul {
    display: block;
}
</style>

<ul class="p-nested-dropdowns">
    <li>Home</li>
    <li>
        <div>Patterns</div>
        <!-- First level sub dropdown -->
        <ul>
            <li>Layout</li>
            <li>Input</li>
            <li>
                <div>Navigation</div>
                <!-- Second level sub dropdown -->
                <ul>
                    <li>Breadcrumb</li>
                    <li>Dropdown</li>
                    <li>Menu</li>
                    <li>Nested dropdown</li>
                </ul>
            </li>
            <li>Display</li>
            <li>Feedback</li>
        </ul>
    </li>
    <li>Products</li>
    <li>About</li>
</ul>

Related patterns

Dropdown

Menu

Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!