Necesito saber como hacer que el menú superior de arriba (el que tiene los href que son logos) sea desplegable. Y no tengo la más mínima idea de como hacerlo. Solo pude hacer el menú desplegable del tipo que cuando haces clic aparecen varias opciones, que debería modificar? También creo que el código está muy desorganizado y algunas cosas sobran.
Este es el código:
<!DOCTYPE html>
<html>
<head>
<div style="overflow: scroll; height: 750px;">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<title>Hospital XYZ</title>
<style>
body {
background-color: #D9E2F3;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}
header {
position: relative;
text-align: center;
}
header img {
position: absolute;
right: 0;
top: 0;
width: 400px;
}
header h1 {
color: #003366;
margin: 0;
}
nav {background-color: #003366;
display: flex;
align-items: center;
justify-content: space-around;
}
nav a {
color: #FFFFFF;
text-decoration: none;
font-size: 1.2em;
}
main {
padding: 20px 80px;
}
footer {
background-color: #003366;
color: #FFFFFF;
padding: 15px;
text-align: center;
}
</style>
<body>
<header>
<img src="https://sis.lapampa.gob.ar/Imagenes/logoSalud2020.png" style="position: absolute; top: -100; right: 0; width: 170px;">
<h1>Hospital XYZ</h1>
<nav>
<a href="#" onclick="mostrar('inicio')"><i class="fa fa-home" Inicio></i></a>
<a href="#" onclick="mostrar('solicitar-turno')"><i class="fa fa-calendar"></i></a>
<a href="#" onclick="mostrar('Sobre Nosotros')"><i class="fas fa-book-open"></i></a>
<a href="#" onclick="mostrar('contacto')"><i class="fas fa-phone"></i></a>
<a href="#" onclick="mostrar('registro')"><i class="fas fa-sign-in-alt"></i></a>
</nav>
</header>
Como se ve, no tengo mucha idea sobre HTML, si en lenguajes pero nunca usé HTML y es algo que todavía no domino completamente. Esta es solo una parte del código porque no me deja subir todo.