冗长的子菜单列表项破坏了 CSS 导航菜单的功能

Question

从这里开始并查看小提琴可能最简单：

具有所需行为的菜单：Correct Example

由于子项过长而出现问题的菜单：Broken Example

I'll explain this as best I can....

我有一个带有列表项的侧边菜单，该菜单项可以包含一个二级菜单及其各自的项目。

将鼠标悬停在主菜单上时，子菜单会出现在其父项旁边。当其中一个子菜单的项目包含大量文本时，就会出现问题。这使得以下主菜单项成为 "unreachable"，因为您不能一直向下单击它们。您必须将鼠标移出子菜单，然后将鼠标直接移至您想要的主项目。

这里的目标是只用 CSS 和 HTML.

编写一个有效的多级侧边菜单

Answer 1

你的小提琴对我来说完全一样。

如果你想在纯 HTML/CSS 中执行此操作（在你这边），使用像 Bootstrap 这样的框架会更容易（他们为你做 JS，你只需使用类，根据您的要求将其限制为 HTML/CSS。

您应该在不同的浏览器上尝试一下，看看哪些有效，哪些无效，而不起作用的浏览器应该会引导您提出更多与跨浏览器兼容相关的问题。

Answer 2

正如Ahs在评论中提到的，z-index会这样修复http://jsfiddle.net/o1rtdxms/5/

ul{
    list-style:none;
}
#main_menu{
    width:150px;
}

#main_menu a{
    display:block;
}

#main_menu li:hover > ul{
    display:inline;
     z-index: -1000;
}
#main_menu li ul{
    position:absolute;
    display:none;

}
#main_menu li ul li{
    position:relative;
    top:-20px;
    left:112px;

}

Answer 3

您的子菜单位于其他列表项之上，因为您没有正确放置子菜单。

#main_menu li ul{
    position:absolute;
    display:none;
    left:100%;
    top:0;
}

根本不需要定位子菜单li。

试试这个：

ul{
    list-style:none;
    margin: 0;
    padding: 0;
}
#main_menu{
    width:150px;
}

#main_menu a{
    display:block;
}

#main_menu a:hover {
    background:red;
}

#main_menu li:hover > ul{
    display:block;
}
#main_menu li ul{
    position:absolute;
    display:none;
    left:100%;
    top:0;
}

#main_menu li{
    position:relative;
}

#main_menu li ul li{
    white-space:nowrap;
}



/* just for styling purposes */
#main_menu a{
    width:100%;
    background:#66CCFF;
    text-align:center;
    border:solid black 1px;
}
#main_menu a[href='#']{
    font-weight:bold;
}
#main_menu a[href='#']:after{
    content: "3A";
    float:right;
}
#main_menu li ul li a{
    background:#CCFFFF
}

<ul id="main_menu">
    <li>
        <a href='#'>Item A</a>
        <ul>
            <li><a href='javascript: return false'>A.1</a></li>
            <li><a href='javascript: return false'>A.2</a></li>
            <li><a href='javascript: return false'>A.3</a></li>
        </ul>
    </li>
    <li>
        <a href='#'>Item B</a>
        <ul>
            <li><a href='javascript: return false'>B.1</a></li>
            <li><a href='javascript: return false'>B.2</a></li>
            <li><a href='javascript: return false'>B.3</a></li>
        </ul>
    </li>
    <li>
        <a href='#'>Item C</a>
        <ul>
            <li><a href='javascript: return false'>C.1</a></li>
            <li><a href='javascript: return false'>C.2</a></li>
            <li><a href='javascript: return false'>Long Sub-element Causes Problem</a></li>
            <li><a href='javascript: return false'>C.4</a></li>
            <li><a href='javascript: return false'>C.5</a></li>
        </ul>
    </li>
    <li><a href='javascript: return false'>Now reachable</a></li>
    <li><a href='javascript: return false'>Now reachable</a></li>

冗长的子菜单列表项破坏了 CSS 导航菜单的功能

Lengthy sub-menu list items break functionality of CSS nav menu

html

css

menu