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

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 acco开发者_如何转开发rding to each main menu item. Of course when the main menu item is selected the sub menu items stick accordingly.

Thanks!

---

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