html - 如何构建动态 css 主/子菜单(或者我需要 jquery)？

Question

我有以下 css 布局(见下图)，想知道 css 是否支持动态子菜单(或者为此我需要 jquery)？也就是说，当鼠标悬停在一个主菜单项上时，Home/Menu 1/Menu 2，我想根据每个主菜单项动态更新custom下面的子菜单。当然，当主菜单项被选中时，子菜单项会相应地粘附。

谢谢!

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