menú desplegable html css

Esta es mi primera publicación en Stack Overflow y no estoy familiarizado con las regulaciones del foro con la publicación. Por favor, háganme saber cualquier cosa que haya hecho mal. Investigué este tema en los foros y nada de lo que he encontrado me da una respuesta clara.

Intento crear un menú desplegable desde el elemento “Noticias”, pero nunca obtengo ningún resultado visible al ejecutar el código. Traté de cambiar el valor de display .dropdown-content para block y ver si hacía visible la lista, pero no se mostraba nada. ¿Qué me estoy perdiendo?

 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{ } 
  

Para resolver su problema de posición fija. Puede agregar position: fixed; a #nav y cambie el ancho en #menu desde width: 80%; a width: 100%;

Aquí hay un violín JS .

Espero que haya ayudado!