html - 如何使用 css 使子菜单显示在主菜单旁边而不是在其下方？

Question

请看这个jsfiddle demo这里。当我将鼠标悬停在 sub1 上时，子子菜单会覆盖 sub2。如何使子子菜单显示在子菜单的右侧但与 sub1(或 sub2，如适用)相邻？

ul.topbar {
	padding:0;
			list-style: none;
			background: #f2f2f2;

}
ul.topbar li {
			display: inline-block;
			position: relative;
			line-height: 5vh;
			text-align: left;


}
ul.topbar li a {
			display: block;
			padding: 8px 25px;
			color: #333;
			text-decoration: none;
			white-space: nowrap;

}
ul.topbar li a:hover {
			color: #fff;
			background: #939393;
			white-space: nowrap;
}
ul.topbar li ul.dropdown {
			
			background: #f2f2f2;
			display: none;
			position: absolute;
			z-index: 999;
			left: 0;
}
ul.topbar li:hover ul.dropdown {
			display: block;	/* Display the dropdown */
}
ul.topbar li ul.dropdown li {
			display: block;
}


ul.topbar li ul.dropdown  {
	padding:0;
			list-style: none;
			background: #f2f2f2;
}
ul.topbar li ul.dropdown li {
			display: inline-block;
			position: relative;
			line-height: 5vh;
			text-align: left;
}
ul.topbar li ul.dropdown li a {
			display: block;
			padding: 8px 25px;
			color: #333;
			text-decoration: none;
}
ul.topbar li ul.dropdown li a:hover {
			color: #fff;
			background: #939393;
}
ul.topbar li ul.dropdown li ul.dropdown {
			min-width: 100px; /* Set width of the dropdown */
			background: #f2f2f2;
			display: none;
			position: absolute;
			z-index: 999;
			left: 0;
}
ul.topbar li ul.dropdown li:hover ul.dropdown {
			display: block;	/* Display the dropdown */
			position:absolute;
}
ul.topbar li ul.dropdown li ul.dropdown li {
			display: block;
			
}

<ul class="topbar">
        <li><a href="../index.html">top1</a></li>
        <li><a href="#">top2</a></li>
        <li> <a href="#" > top3 &#9662;</a>
        	<ul class="dropdown">
        		<li> <a href="#" > sub1 &#9656; </a>
        			<ul class="dropdown"> 
                    	<li> <a href="#" >asfg </a></li>
                        <li> <a href="#" >hbch </a></li>
                        <li> <a href="#" >erft </a></li>
                        <li> <a href="#" >erft </a></li>
                        <li> <a href="#" >erft </a></li>
                    </ul>
        		</li>
        		<li> <a href="#" >sub2 &#9656; </a>
                	<ul class="dropdown">
                    	<li> <a href="#" >rtiuji </a></li>
                        <li> <a href="#" >erft </a></li>
                        <li> <a href="#" >erft </a></li>
                        <li> <a href="#" >erft </a></li>
                        <li> <a href="#" >erft </a></li>
                    </ul>
                </li>
        	</ul>
        </li>
        <li><a href="#">top5 &#9662;</a>
            <ul class="dropdown">
                <li><a href="../net-jrf/phys-sci/main.html">Phy</a></li>
                <li><a href="../net-jrf/chem-sci/main.html">Chem</a></li>
                
            </ul>
        </li>
        <li><a href="#">top6</a></li>
</ul>

Answer 1

在您的 CSS 规则 ul.topbar li ul.dropdown li ul.dropdown 中，您想修复定位。

您已经在使用 position: absolute，这意味着该元素将被定位到距离它最近的具有定位集的祖先的左上角的绝对距离处。

然后设置 left:0。这意味着使左侧距离其祖先左侧为 0 像素。如果将其切换为 100%(% 定位基于祖先的大小而不是元素本身)，您现在会将菜单从左侧推到祖先的完整大小- 即它的左侧与祖先的右侧对齐。

在您的特定情况下，您可能还想添加一个 top:0。否则该元素将保持其原始顶部位置在祖先下方，并且几乎不可能将鼠标移到上方。

您可能还需要考虑简化您的规则。利用 CSS 规则的级联方式，这样您就不必为菜单的每一层制定唯一的规则。