Question

我正在使用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，并设置页面高度等等，但这似乎没有任何区别。我希望有人可以指出我明显出错的地方......

非常感谢......

科林

Answer 1

w3-top应放在w3-bar外面，作为酒吧的包装/容器：

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

Answer 2

你为w3-bar类设置了overflow：hidden，删除overflow：hidden，

或将此行添加到样式标记

.w3-bar 
{
    overflow: visible;
}

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

2 个答案: