Question

我正在尝试在html页面中实现两个下拉项。但问题是它们不是位于下拉文本底部的位置，而是它们相互重叠。尝试保证金属性，但我想自动定位它们。我制作了样式表代码，以便我可以在任何我喜欢的地方使用它，并显示删除内容，只需要在下拉列表中添加悬停事件

，这将通过块显示将其定位为绝对值。

CSS代码是：

＆＃13;

.NavBar{
    padding: 10px 10px 10px 0px;
    margin: 0;
    background-color: #616161;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    font-family: Arial, sans-serif;
}
.NavBarList{
    display: inline;
    padding: 10px;
    background-color: #616161;
    color: white;
    margin: 0;
}
.NavBarList:hover{
    background-color: black;
}
.content{
    display: none;
    margin: 10px 0 0 0;
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);
    z-index: 1;
}
.content a{
    display: block;
    background-color: white;
    color: black;
    min-width: 100px;
    text-decoration: none;
    padding: 5px;
}
.content a:hover{
    background-color: #81D4FA;
}
.content a:hover .NavBarList{
    background-color: black;
}


The HTML Code is:

＆＃13;

<html>
    <head>
	<link href="NavBar.css" rel="stylesheet" type="text/css"/>
	<style>
	    #Home:hover #homeContent{
		display: block;
		position: absolute;
	    }
	    #AboutUs:hover #AboutUsContent{
		display: block;
		position: absolute; 
	    }
	</style>
    </head>
    <body bgcolor="#1976D2" >
	<ul class="NavBar">
	    <li class="NavBarList" id="Home">
		Home
		<div class="content" id="homeContent">
		    <a href="#">Bus</a>
		    <a href="#">Route</a>
		    <a href="#">Bus and Route</a>
		</div>
	    </li>
	    <li class="NavBarList" id="AboutUs">
		About Us
		<div class="content" id="AboutUsContent">
		    <a href="#">Bus1</a>
		    <a href="#">Route1</a>
		    <a href="#">Bus and Route1</a>
		</div>
	    </li>
	</ul>
    </body>
</html>

＆＃13;

Answer 1

使用position: relative上的.NavBarList和left: 0上的.content，例如：

.NavBarList {
    position: relative;
}
.content {
    left: 0;
}

请看下面的代码段：

＆＃13;

.NavBar{
    padding: 10px 10px 10px 0px;
    margin: 0;
    background-color: #616161;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    font-family: Arial, sans-serif;
}
.NavBarList{
    display: inline;
    position: relative;
    padding: 10px;
    background-color: #616161;
    color: white;
    margin: 0;
}
.NavBarList:hover{
    background-color: black;
}
.content{
    display: none;
    left: 0;
    margin: 10px 0 0 0;
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);
    z-index: 1;
}
.content a{
    display: block;
    background-color: white;
    color: black;
    min-width: 100px;
    text-decoration: none;
    padding: 5px;
}
.content a:hover{
    background-color: #81D4FA;
}
.content a:hover .NavBarList{
    background-color: black;
}

＆＃13;

<html>
    <head>
	<link href="NavBar.css" rel="stylesheet" type="text/css"/>
	<style>
	    #Home:hover #homeContent{
		display: block;
		position: absolute;
	    }
	    #AboutUs:hover #AboutUsContent{
		display: block;
		position: absolute; 
	    }
	</style>
    </head>
    <body bgcolor="#1976D2" >
	<ul class="NavBar">
	    <li class="NavBarList" id="Home">
		Home
		<div class="content" id="homeContent">
		    <a href="#">Bus</a>
		    <a href="#">Route</a>
		    <a href="#">Bus and Route</a>
		</div>
	    </li>
	    <li class="NavBarList" id="AboutUs">
		About Us
		<div class="content" id="AboutUsContent">
		    <a href="#">Bus1</a>
		    <a href="#">Route1</a>
		    <a href="#">Bus and Route1</a>
		</div>
	    </li>
	</ul>
    </body>
</html>

＆＃13;

CSS排名参考：CSS Tricks，Codeacademy

希望这有帮助！

Answer 2

我认为您的意思是您希望每个下拉菜单显示在其父导航栏元素下方，而不是所有下拉列表一直向左移动。如果这确实是您的意思，我尝试将def find_prefixes_with_mismatches(str, p, k): p_with_end = [prefix+'$' for prefix in p] candidates = list(range(len(p))) mismatches = [0 for _ in candidates] result = [] for char_ix in range(len(str)): #at each iteration we build a new set of candidates new_candidates = [] for prefix_ix in candidates: #have we reached the end? if p_with_end[prefix_ix][char_ix] == '$': #then this is a match result.append(p[prefix_ix]) #do not add to new_candidates else: #do we have a mismatch if str[char_ix] != p_with_end[prefix_ix][char_ix] and str[char_ix] != '.' and p_with_end[prefix_ix][char_ix] != '.': mismatches[prefix_ix] += 1 #only add to new_candidates if the number is still not >k if mismatches[prefix_ix] <= k: new_candidates.append(prefix_ix) else: #if not, this remains a candidate new_candidates.append(prefix_ix) #update candidates candidates = new_candidates return result类的display属性从.NavBarList更改为inline，这似乎有所帮助（请参阅上面的屏幕截图）。这个改变的代码可以在这里找到这个JSFiddle链接：

http://jsfiddle.net/1gk98gmw/

您可以通过从inline-block类中移除padding: 10px 10px 10px 0px来进一步调整父导航栏元素与灰色导航栏本身之间的灰色空间：

Answer 3

绝对定位将元素定位到它最接近的定位祖先 - 因为元素的祖先都没有集position，因此元素默认为窗口的位置。您需要设置绝对元素父级的位置，并为其设置左侧值，如下所示：

.NavBarList {
  position: relative;
}

.content {
  left: 0;
}

导航栏中的多个下降在HTML页面中相互重叠

3 个答案: