5
これは私の初めてのスタックオーバーフローポストであり、ポスティングに関するフォーラム規制に精通していません。だから私が間違って行ったことを教えてください。私はフォーラムでこの問題を研究してきましたが、何も私にはわかりません。html CSSドロップダウンメニュー
「ニュース」要素からドロップダウンメニューを作成しようとしていますが、コードを実行しても目に見える結果が得られません。 .dropdown-contentのdisplayの値をblockに変更して、リストを表示させるかどうかを確認しましたが、何も表示されませんでした。私は何が欠けていますか？
body{
\t background-image: url("images/seamless-panda-bear-pattern.jpg");
\t font-size: 100%;
\t width: 80%;
\t margin: auto;
\t font-family: Palatino,"Palatino", Arial;
}
#top{
\t background-color: black;
\t color: white;
\t padding-left: 10px;
\t border: 2px solid white;
\t font-family: Copperplate,"Copperplate Gothic Light",fantasy;
\t opacity: 0.85;
\t padding-left: 25px;
}
#menu{
\t list-style-type: none;
\t margin: 0;
\t padding: 0;
\t overflow: hidden;
\t background-color: #333;
\t position: fixed;
\t width: 80%;
}
li{
\t float: left;
}
#login{
\t float: right;
\t padding-right: 20px;
}
li a{
\t display: block;
\t color: white;
\t text-decoration: none;
\t text-align: center;
\t padding: 14px 16px;
}
li a:hover{
\t background-color: white;
\t color: black;
}
li.dropdown{
\t display: inline-block;
}
.dropdown-content{
\t display: none;
\t position: absolute;
\t background-color: #f9f9f9;
\t min-width: 160px;
\t box-shadow: 0px 8px 16px 0px rgba(0,0,0,0,2);
\t padding: 12px 16px;
\t z-index: 1;
}
.dropdown-content a{
\t display: block;
\t text-decoration: none;
\t padding: 12px 16px;
\t color: black;
}
.dropdown:hover .dropdown-content{
\t display: block;
}
#bio{
}
#bottom{
}<div id="nav">
<ul style="list-style-type: none" id="menu">
\t <li><a href="home.html">Home</a></li>
\t <li class="dropdown"><a class="dropbtn" href="#">News</a>
\t \t <div class="dropdown-content">
\t \t \t <a href="#">Games</a>
\t \t \t <a href="#">Web Design</a>
\t \t \t <a href="#">Travel</a>
\t \t </div>
\t </li>
\t <!-- create a link to a part of the same page for contact info -->
\t <li><a href="#bottom">Contact info</a></li>
\t <li id="login"><a href="login.html">Log In</a></li>
</ul>
</div>
何をしたいですか？ – mmativ
私はコードスニペットを実行するとき、それはあなたが望むのと同じように機能しますが、私には何かがありませんか？ P.S.あなたの投稿は素晴らしいです！ –
あなたは実際にほとんどの人が使っていないコードを十分に提供しました。わーい！！！私のブラウザでも動作します。 – Velocibadgery