Col*_*ter 3 html css drop-down-menu
我正在使用 w3css 创建一个菜单栏。我已经在几个网站上使用过它，并且非常喜欢它的作用以及它的实施方式......但我遇到了一些问题。我的菜单栏有可悬停的下拉菜单，但我也希望将其固定在屏幕顶部，以便内容仅在其下方滚动。
这是我的代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin-top: 50px;
}
</style>
</head>
<body>
<div class="w3-bar w3-black w3-top">
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-bars"></i></a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
<span class="w3-bar-item">Search: </span>
<form action="search.asp" method="post" name="searchForm" id="searchForm">
<input type="text" class="w3-bar-item w3-input w3-white" placeholder="Booking Ref..." name="SearchText">
<a href="#" onclick="document.getElementById('searchForm').submit();" class="w3-bar-item w3-button w3-green"><i class="fa fa-search"></i></a>
</form>
<a href="#" class="w3-bar-item w3-button w3-right">Logout</a>
</div>
<h1>Page Title</h1>
<p> </p>
</body>
</html>
如果我将 w3-top 类从 div 中取出，则下拉菜单可以正常工作，但是当页面滚动时菜单栏会从屏幕顶部滚动。如果我包含 w3-top 类，那么下拉菜单就不会显示......它们有点出现在某些东西后面，但我看不到是什么。
我尝试过更改各种元素和事物的 Z-Index，并设置页面高度等，但这似乎没有任何区别。我希望有人能指出我明显出错的地方......
非常感谢...
科林
小智 5
w3-top 应该放在 w3-bar 之外，作为酒吧的包装器/容器：
在此处查看更新的代码：https : //www.w3schools.com/code/tryit.asp?filename=FEZ9Z1BYNTEX