javascript - 使用 css 和 javascript 创建大型菜单的提示

Question

所以基本上我正在寻找的是一个包含 5 个内容选项卡的菜单，每个选项卡内部大约有 7 个项目。这些项目中的每一个都需要有可能拥有自己的子菜单。

我正在寻找构建它的最佳方法，以便仅使用 css、javascript（无 jquery）和 html 即可轻松读取和更新它。还必须与 IE 8 兼容（对我来说是 PITA）。

感谢您提供任何提示或建议。

jsfiddle.net/nWxrY/2/

http://i.imgur.com/9NLc88W.png <- 我想做的图片

Answer 1

该代码不起作用，因为它被包装在 onLoad 中（在小提琴的左侧）。

我为它制作了一个小的 CSS 解决方案，您可以从这里开始构建它。我希望它适合您的需求。在“更改请求”>“基础设施服务”下，您可以在第一项下找到另一个基于 css 的子菜单。

jsFiddle

我将以下内容添加到#t4：

<div class="mnuItem" id="chgInfrastructureMnu">
   <img src="arr1.pngx" style="margin:-35px 0px 0px -10px;position:absolute"/>
   <div class="mnuSubItem"><a href="#">item</a> <!-- this part I added -->
       <div class="mnuSub">
            <a href="#">subitem</a>
      </div>
   </div><br/>
       <a href="#">item</a><br/>
</div>

我还添加了以下CSS：

.mnuSubItem .mnuSub {
    display: none;
    position: absolute;
    left: 50px;
    top: 0;
}
.mnuSubItem {
    position:relative;
}
.mnuSubItem:hover .mnuSub {
    display: block;
}