从这里开始并查看 fiddle 可能是最简单的:
具有所需行为的菜单:Correct Example
由于子项过长而导致行为中断的菜单:Broken Example
I'll explain this as best I can....
我有一个带有列表项的侧边菜单,该菜单项可以包含一个二级菜单及其各自的元素。
将鼠标悬停在主菜单上时,子菜单会出现在它们的父项旁边。当其中一个子菜单的元素包含大量文本时,就会出现问题。这使得以下主菜单项“无法访问”,因为您不能一直向下单击它们。您必须将鼠标移出子菜单,然后将鼠标直接移至您想要的主元素。
这里的目标是只用 CSS 和 HTML 编写一个有效的多级侧边菜单。
最佳答案
您的子菜单位于其他列表项之上,因为您没有正确放置子菜单。
#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>
关于html - 冗长的子菜单列表项破坏了 CSS 导航菜单的功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31440408/