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

Question

I have the following css layout (see pic below) and would like to know if css supports dynamic sub menus (or do I need jquery for this)? That is, when the mouse hovers over a main menu item, Home/Menu 1/Menu 2, I would like to dynamically update the sub menus below custom according to each main menu item. Of course when the main menu item is selected the sub menu items stick accordingly.

Thanks!

Answer 1

Try this out 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;
}