我正在使用 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..." …