Para no dominar al 100% intentas atacar un problema complejo ;)
Bloque horizontal en la parte superior de la página
Por la disposición de tu HTML supongo que quieres un menú horizontal en la parte superior de la página. A la izquierda del menú quieres mostrar el logo.
Para ello necesitas dividir el espacio horizontal en dos partes, una para el logo y otra para el menú. Lo mejor es hacerlo mediante flexbox
puesto que así podrás controlar el espacio que ocupan y cómo se comporta en pantallas pequeñas:
#HTML
<header>
<div class='logo'>
<img src="img/fhes.png" alt="logo">
</div>
<nav>
El menú
</nav>
</header>
#CSS
header {
display: flex;
justify-content: space-between;
}
Con eso lo que logras es que el espacio de la cabecera se divida en dos partes, una para el logo y otra para el menú.
Además, justify-content: space-between;
hace que el logo se vaya contra el margen izquierdo y el menú contra el margen derecho. Esto puedes cambiarlo si quieres otra distribución.
El menú en sí
El menú que te propones hacer es complejo ya que no son dos o tres opciones en línea sino que hay un sub-menú.
Nuevamente, para distribuir las opciones del menú en el espacio disponible te recomiendo que para la lista (elemento <ul>
) utilices flexbox
.
Sin submenú, quedaría así:
body{
margin: 0;
}
header{
width: 100%;
background: #4E94AB;
display: flex;
justify-content: space-between;
}
.logo {
width: 160px;
}
.logo img {
width: 100%;
padding: 10px;
object-position: center;
object-fit: cover;
}
.menu ul {
display:flex;
flex-wrap:wrap;
}
<header>
<div class="logo">
<img src="https://robohash.org/random" width="10%">
</div>
<nav class="menu">
<ul>
<li><a href="#section1">Inici</a></li>
<li><a href="#section2">Qui som?</a></li>
<li><a href="#section3">Història</a></li>
<li>Serveis</li>
<li><a href="#section5">Consultes</a></li>
<li><a href="#section6">Contacte</a></li>
</ul>
</nav>
</header>
El sub menú
El tema del submenú es más delicado. Si quieres solucionarlo exclusivamente con HTML y CSS (sin utilizar JavaScript), entonces debes utilizar un elemento que te permita un cambio de estado compatible con todos los dispositivos (esto es, :hover
no te va a servir porque en teléfonos móviles y tablets no funciona).
Es habitual utilizar en estos casos un checkbox
y controlar según su estado lo que ocurre con el elemento que contiene las opciones del submenú:
body{
margin: 0;
}
header{
width: 100%;
background: #4E94AB;
display: flex;
justify-content: space-between;
}
.logo {
width: 100px; /* el espacio aquí es limitado */
}
.logo img {
width: 100%;
padding: 10px;
object-position: center;
object-fit: cover;
}
.menu {
display:flex;
flex-wrap:wrap;
}
.menu a {
display: block;
}
input[id="dropdown"] {
position: absolute;
clip: rect(0, 0, 0, 0);
}
label[for="dropdown"] {
cursor: pointer;
}
.dropdown-content {
display: flex;
flex-direction: column;
}
input[id="dropdown"] ~ .dropdown-content {
height: 0;
width: 0;
overflow: hidden;
opacity: 0;
}
input[id="dropdown"]:checked ~ .dropdown-content {
height: 100%;
width: auto;
opacity: 1;
}
<header>
<div class="logo">
<img src="https://robohash.org/random" width="10%">
</div>
<nav class="menu">
<a href="#section1">Inici</a>
<a href="#section2">Qui som?</a>
<a href="#section3">Història</a>
<input type="checkbox" name="serveis" id="dropdown">
<label for="dropdown">Serveis</label>
<div class="dropdown-content">
<a href="ginecologia.html">Ginecologia</a>
<a href="#">Consultes Externes</a>
<a href="#">Traumatologia</a>
<a href="#">Cirugia</a>
<a href="#">Medicina Interna</a>
<a href="#">Urgencies</a>
<a href="#">Quiròfan</a>
</div>
<a href="#section5">Consultes</a>
<a href="#section6">Contacte</a>
</nav>
</header>
Queda pendiente modificar los colores, márgenes interiores (padding
) y exteriores de los elementos, etc., pero espero que te sea útil.