2
私はw3cssを使用してメニューバーを作成しています。私はこれをいくつかのサイトで使ってきましたが、それが何をしているのか、実装するのがどれほど簡単であるのかはよく分かりますが、少し問題があります。 私のメニューバーにはホバーブルなドロップダウンメニューがありますが、コンテンツが画面の下にスクロールするように、画面上部に固定したいと考えています。ここでw3css - ドロップダウンメニューが上部に固定されています（w3-top）
は私のコードです：私は離れてdiv要素からW3トップクラスを取る場合
<!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クラスを含めると、ドロップダウンメニューが表示されません。何かの背後に表示されますが、何が表示されないのですか。
さまざまな要素やもののZ-インデックスを変更してページの高さなどを設定しようとしましたが、これは違いはありません。 私は明らかに間違って行ってきたところ、誰かが指摘できることを願っています...
どうもありがとうございました...
コリン・
をここでは、サンプル https://jsfiddle.net/zoe8pgbu/3/ –
パーフェクトを見ることができます - おかげで非常に。 –