如何构建动态css主/子菜单（或者我需要jquery）？

Question

我有以下css布局（见下图），想知道css是否支持动态子菜单（或者我是否需要jquery）？也就是说，当鼠标悬停在主菜单项Home / Menu 1 / Menu 2上时，我想根据每个主菜单项动态更新下面的自定义子菜单。当然，当选择主菜单项时，子菜单项会相应地粘贴。

谢谢！

Answer 1

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