This is my first Stack Overflow post and I am not familiar with posting forum rules. So please, let me know everything that I did wrong. I have researched this issue in the forums, and none of what I met gives me a clear answer.
I'm trying to create a drop-down menu from the News item, but I never get visible results when I run the code. I tried changing the value of .dropdown-content display to block to see if it would be displayed in the list, but nothing was displayed. What am I missing?
body{ background-image: url("images/seamless-panda-bear-pattern.jpg"); font-size: 100%; width: 80%; margin: auto; font-family: Palatino,"Palatino", Arial; } #top{ background-color: black; color: white; padding-left: 10px; border: 2px solid white; font-family: Copperplate,"Copperplate Gothic Light",fantasy; opacity: 0.85; padding-left: 25px; } #menu{ list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; position: fixed; width: 80%; } li{ float: left; } #login{ float: right; padding-right: 20px; } li a{ display: block; color: white; text-decoration: none; text-align: center; padding: 14px 16px; } li a:hover{ background-color: white; color: black; } li.dropdown{ display: inline-block; } .dropdown-content{ display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0,2); padding: 12px 16px; z-index: 1; } .dropdown-content a{ display: block; text-decoration: none; padding: 12px 16px; color: black; } .dropdown:hover .dropdown-content{ display: block; } #bio{ } #bottom{ }
<div id="nav"> <ul style="list-style-type: none" id="menu"> <li><a href="home.html">Home</a></li> <li class="dropdown"><a class="dropbtn" href="#">News</a> <div class="dropdown-content"> <a href="#">Games</a> <a href="#">Web Design</a> <a href="#">Travel</a> </div> </li> <li><a href="#bottom">Contact info</a></li> <li id="login"><a href="login.html">Log In</a></li> </ul> </div>
source share