I am trying to use a dropdown menu with a fixed navigation bar. The dropdown links are showing all the time and teh navigation bar has grown to include them so it is wider than normal.
below is the CSS code, attached is the file which tries to use it. Why does my navigation bar not do the same as teh one in W3schools?
/* Style the navigation bar links */
ul {
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #008080;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: lightseagreen;
}
li.dropdown {
display:inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #008080;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color:black;
padding:12px 16px;
text-decoration: none;
display: block;
text-align:left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
Services.html