5
Это мой первый пост в Stack Overflow, и я не знаком с правилами форума с публикацией. Поэтому, пожалуйста, дайте мне знать все, что я сделал неправильно. Я исследовал эту проблему на форумах, и ничто из того, что я встретил, не дает мне ясного ответа.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
Когда я запускаю фрагмент кода, он работает так же, как вы этого хотите, есть ли что-то, что мне не хватает? Постскриптум ваш пост БОЛЬШОЙ! –
Вы на самом деле сделали то, что большинство людей не делали и предоставляли достаточно кода. УРА!!! Он работает и в моем браузере, и в ХРОМЕ. – Velocibadgery