1
私はcss-Dropdown経由でナビゲーションバーメニューを作成するコードを書いていましたが、ここで私はここで止まっています。私が「ドロップダウン」をクリックするたびに、希望のメニューバーを得ることができませんが、指示された位置で「位置：相対」を取り除くと正しい結果が得られます。元のコードの問題は何ですか？CSSの位置に何らかのエラーがあったためにドロップダウンメニューバーを表示できません
<!DOCTYPE html>
<html>
<head>
<style>
ul{
list-style-type: none;
margin:0;
padding:0;
overflow: hidden;
width: 100%;
background-color: #333;
}
li{
float: left;
}
li a, .dropbutton{
text-decoration: none;
color: white;
padding: 12px 16px;
display: inline-block;
border: none; /* x */
text-align: center;
}
li a:hover , .dropdown:hover .dropbutton
{
background-color:black;
}
i「が位置：相対」を削除した場合、下から、私はあなたが<ul>からoverflow:hiddenを削除する必要があるナビゲーションバーのメニューに
.dropdown{
position: relative; /* remove */
display: inline-block;
}
.dropdown_content {
display: none;
background-color: #444;
position: absolute;
color: white;
box-shadow: 0 12px 16px 0px rgba(0,0,0,0.7);
text-align: center;
z-index: 1;
}
.dropdown_content a{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown_content{
display: block;
}
.dropdown_content a:hover{
background-color: silver;
}
</style>
</head>
<body>
<ul>
<li><a href="#jfjkwj">Home</a></li>
<li><a href="#jfjkwj">Home</a></li>
<li><a href="#jfjkwj">Home</a></li>
<li><a href="#jfjkwj">Home</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbutton">Dropdown</a>
<div class="dropdown_content">
<a href="#nkkje">okay</a>
<a href="#nkkje">okay</a>
<a href="#nkkje">okay</a>
</div>
</li>
</li>
</ul>
</body>
</html>
浮動小数点の問題点は何ですか？なぜここに「浮動小数点：左」と書くのは間違っているのですか？ – Jayesh
@Jayeshは、floatをliで使用すると、親（ul）にスペースがないため、表示する幅と高さを設定する必要があるため、オーバーフローを追加した理由：hiddenがドロップダウンを隠す原因となります – Chiller
私はあなたに完全に同意しますが、このような場合は/ * https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar * /になります。 ul/li.dropdownにはデフォルトの位置が与えられていません。静的は使用されますが、私が位置を取るとすぐ：navbarが消えます！この特定の場合、ここで何が問題になっていますか？ – Jayesh