Nick Prieto Nick Prieto - 2 years ago 83
HTML Question

html css dropdown menu

This is my first ever post to Stack Overflow and I'm not familiar with forum regulations with posting. So please let me know anything that I have done wrong. I have researched this issue in the forums and nothing I've come across gives me a clear answer.

I am trying to create a dropdown menu from the "News" element, but I never get any visible result when running the code. I tried to change the

value to
to see if it would make the list visible, but nothing showed. What am I missing?

background-image: url("images/seamless-panda-bear-pattern.jpg");
font-size: 100%;
width: 80%;
margin: auto;
font-family: Palatino,"Palatino", Arial;


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;

list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
width: 80%;
float: left;

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;

display: inline-block;

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;





<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>
<!-- create a link to a part of the same page for contact info -->
<li><a href="#bottom">Contact info</a></li>
<li id="login"><a href="login.html">Log In</a></li>

Answer Source

To solve your position fixed issue. You can add position: fixed; to #nav and change the width on #menu from width: 80%; to width: 100%;

Here's a JS Fiddle.

Hope that helped!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download