How to create dynamic css main / sub menu (or do I need jquery)?

Question

I have the following css layout (see the figure below) and would like to know if css supports dynamic submenus (or do I need jquery for this)? That is, when the mouse hangs over the main menu item, Main / Menu 1 / Menu 2, I would like to dynamically update the submenu below the user one in accordance with each item on the main menu. Of course, when the main menu item is selected, the submenu items will be inserted accordingly.

Thank!

Answer 1

Try this fiddle .

HTML

<ul class="mainmenu">
    <li><a href=#>Test1</a>
        <ul class="submenu">
            <li><a href=#>Test1</a></li>
            <li><a href=#>Test2</a></li>
            <li><a href=#>Test3</a></li>
        </ul>
    </li>
    <li><a href=#>Test2</a>
        <ul class="submenu">
            <li><a href=#>Test1</a></li>
            <li><a href=#>Test2</a></li>
            <li><a href=#>Test3</a></li>
        </ul>
    </li>
    <li><a href=#>Test3</a>
        <ul class="submenu">
            <li><a href=#>Test1</a></li>
            <li><a href=#>Test2</a></li>
            <li><a href=#>Test3</a></li>
        </ul>
    </li>
</ul>

CSS

ul.mainmenu {
    list-style: none;
}

ul.mainmenu li {
    display: inline-block;
}

ul.mainmenu li a {
    text-decoration: none;
    background: #ff005a;
    color: #fff;
    padding: 0.25em;
}

ul.mainmenu li a:hover {
    background: #ff00ff;
}

ul.mainmenu li ul.submenu {
    list-style: none;
    display: none;
}

ul.mainmenu li:hover > ul.submenu {
    position: absolute;
    display: inline-block;
    top: 40px;
}