html - css 中的不稳定行为下拉

Question

我正在练习制作一个 CSS 下拉菜单。但是，在下面的代码中，在悬停“Hello” li 时，我希望下拉列表 li “Hello1” 落在它的正下方。正在发生。然而不幸的是，其他李的“酷”和“世界”也落了下来。我想知道原因和解决方案。但是我不想将 float 添加到任何元素，因为它之前已经产生了一些问题。

html body {
	height: 100%;
	width: 100%;
}

.roundborder {
	border-radius:5px
}

.container {
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	width: 75%;
	/* [disabled]background-color: rgba(153,153,153,1); */
	height: auto;
}

ul {
	text-align: center;
	border: thin solid rgba(0,0,0,1);
	width: auto;
	margin-top: 0;
	margin-right: 10%;
	margin-bottom: 0;
	margin-left: 10%;
	padding-top: 0;
	padding-right: 0px;
	padding-bottom: 0;
	padding-left: 0px;
	background-color: rgba(255,0,0,1);
	height: 30px;
}

li {
	display: inline-block;
	border: 1px solid black;
	/* [disabled]padding: 5px; */
	height: 30px;
	width: auto;
	margin-top: 0;
	margin-right: 15px;
	margin-bottom: 0;
	margin-left: 15px;
}

ul > li > ul {
	width: 100px;
	display: none;
	padding-left: 0px;
	margin-top: 10px;
	margin-left: 0px;
}

ul > li > ul > li {
	display:block;
list-style-type:none;
}

ul li:hover > ul {
	display: block;
}

<div class="container">
<ul class="roundborder">
<li>Hello
<ul> 
<li> Hello1 </li>
</ul>
</li>
<li>Cool</li>
<li>World</li>
</ul>
</div>

Answer 1

因为您没有专门为下拉菜单设置“position”属性，它将使用默认定位(position:relative)，这将影响其周围元素的定位尝试 position:absolute

即

ul > li{
   position:relative;
   ...
}
ul > li > ul{
   position:absolute;
   left:0;
   top: 30px;/*or height of header*/
   ...
}

本文深入讲解定位属性https://developer.mozilla.org/en/docs/Web/CSS/position