w3css - 下拉菜单固定在顶部（w3-top）答案

【问题标题】：w3css - Dropdown Menu fixed at top (w3-top)w3css - 下拉菜单固定在顶部（w3-top）
【发布时间】：2017-04-16 07:55:46
【问题描述】：

我正在使用 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>&nbsp;</p>


</body>
</html>

如果我将 w3-top 类从 div 中移开，那么下拉菜单可以正常工作，但是当页面滚动时菜单栏会滚动到屏幕顶部。如果我包含 w3-top 类，则不会显示下拉菜单......它们有点出现在某些东西的后面，但我看不到什么。

我尝试过更改各种元素和事物的 Z-Index，设置页面高度等，但这似乎没有任何区别。我希望有人能指出我明显出错的地方......

非常感谢...

科林

【问题讨论】：

标签： html css drop-down-menu

【解决方案1】：

w3-top 应该放在 w3-bar 之外，作为 bar 的包装器/容器：

在此处查看更新的代码： https://www.w3schools.com/code/tryit.asp?filename=FEZ9Z1BYNTEX

【讨论】：

这个解决方案对我有用。我遇到了同样的问题，因为我将 w3-top 作为包装 div 中的样式，而 w3-bar div 定义了页面顶部的栏。从包含的 div 中删除 w3-top 可以解决问题。

【解决方案2】：

您为 w3-bar 类设置了 overflow: hidden ，删除了 overflow: hidden ，

或将此行添加到样式标签

.w3-bar 
{
    overflow: visible;
}

【讨论】：