我有以下 css 布局(见下图),想知道 css 是否支持动态子菜单(或者为此我需要 jquery)?也就是说,当鼠标悬停在一个主菜单项上时,Home/Menu 1/Menu 2,我想根据每个主菜单项动态更新custom下面的子菜单。当然,当主菜单项被选中时,子菜单项会相应地粘附。
谢谢!
最佳答案
试试这个 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;
}
关于html - 如何构建动态 css 主/子菜单(或者我需要 jquery)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7382947/