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

Question

从这里开始并查看 fiddle 可能是最简单的:

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

由于子项过长而导致行为中断的菜单:Broken Example

---

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

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

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

这里的目标是只用 CSS 和 HTML 编写一个有效的多级侧边菜单。

Answer 1

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

#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: "\203A";
    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>