2016-04-22 30 views
5

To jest mój pierwszy wpis do Stack Overflow i nie znam regulaminu forum z publikowaniem. Proszę więc poinformować mnie o wszystkim, co zrobiłem źle. Zbadałem ten problem na forach i nic, co napotkałem, daje mi jasną odpowiedź.Menu rozwijane html css

Próbuję utworzyć menu rozwijane z elementu "Wiadomości", ale nigdy nie uzyskuję żadnych widocznych wyników podczas uruchamiania kodu. Próbowałem zmienić wartość .dropdown-content na , aby zobaczyć, czy spowodowałoby to wyświetlenie listy, ale nic nie pokazało. czego mi brakuje?

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>

+0

co chcesz zrobić? – mmativ

+3

Po uruchomieniu fragmentu kodu działa on tak, jak chcesz, czy jest coś, czego mi brakuje? P.S. twój wpis jest WIELKI! –

+1

Rzeczywiście zrobiłeś to, czego większość ludzi nie dostarczyło i dostarczyło wystarczającą ilość kodu. YAY !!! Działa też w mojej przeglądarce, CHROME. – Velocibadgery

Odpowiedz

4

Aby rozwiązać swoją pozycję Naprawiono problem. Możesz dodać position: fixed; do #nav i zmienić szerokość na #menu z width: 80%; do width: 100%;

Oto JS Fiddle.

Mam nadzieję, że pomogło!

+0

Dziękuję bardzo! –

+1

Serdecznie witamy! Zadajesz WIELKIE pytania! –

+0

Jedyny problem, jaki znalazłem, to że element logowania nie jest już wyświetlany po prawej stronie ekranu. Znajduje się obok informacji kontaktowych. Czy istnieje sposób, aby to naprawić? –