Código HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="ESTILO practica [Link]" type="text/css">
</head>
<body bgcolor="#F7E8A6">
<div class="container">
<h1>MENÚ</h1>
<nav id="menu">
<ul>
<li> <a href="#Lista ordenada"> Lista ordenada</a></li>
<li> <a href="#Lista desordenada"> Lista desordenada</a></li>
<li> <a href="#Tabla(Horario)">Tabla(Horario)</a></li>
<li> <a
href="#Formulario(Contacto)">Formulario(Contacto)</a></li>
</ul>
</nav>
</div>
<ol id="Lista ordenada">
<h1> Lista ordenada</h1>
<li> Alexa Rodríguez</li>
<li> Cristel Mercedes</li>
<li> Daury García</li>
<li> Emely Hernández</li>
<li> Frida Acevedo</li>
<li> Joan Collado</li>
<li> Lía Báez</li>
<li> María Cruz</li>
<li> Marianne Inoa</li>
<li> Miguel Reyes</li>
</ol>
<ul id="Lista desordenada">
<h1> Lista desordenada</h1>
<li>Análisis y Diseño de Sistemas informáticos</li>
<li> Base de Datos</li>
<li> Portales Web</li>
<li> Matemáticas</li>
<li> Lengua Española</li>
<li> Biología</li>
<li> Ciencias Sociales</li>
<li> Ofimática</li>
<li> Educación Artística</li>
<li> Inglés</li>
<li> Educación Física</li>
<li> Formación Humana</li>
</ul>
<table id="Tabla(Horario)" style="width: 90%;" border="4"
cellpadding="6" cellspacing="6" bgcolor="#5C8EDF">
<center><h1>Tabla(Horario)</h1></center>
<tr>
<td> </td>
<td> Lunes</td>
<td> Martes</td>
<td> Miércoles</td>
<td> Jueves</td>
<td> Viernes</td>
</tr>
<tr>
<td bgcolor="red"> 7:40/7:50<div class="linea"></div></td>
<th align="center" bgcolor="red" colspan="5">
ACTO CÍVICO-RELIGIOSO</th>
</tr>
<tr>
<td bgcolor="#CB7F6E "> 7:50/8:40 <div class="linea"></div></td>
<td bgcolor="#CB7F6E "> Inglés</td>
<td bgcolor="#CB7F6E "> Matemáticas</td>
<td bgcolor="#CB7F6E "> Arte</td>
<td bgcolor="#CB7F6E "> Base de Datos</td>
<td bgcolor="#CB7F6E "> Ciencias
Sociales</td>
</tr>
<tr>
<td bgcolor="#B86452 "> 8:40/9:30<div class="linea"></div></td>
<td bgcolor="#B86452 "> Análisis y Diseño de
Sistemas informáticos</td>
<td bgcolor="#B86452 "> Análisis y Diseño de
Sistemas informáticos</td>
<td bgcolor="#B86452 "> Portales Web</td>
<td bgcolor="#B86452 "> Ciencias de la
Naturaleza</td>
<td bgcolor="#B86452 "> Análisis y Diseño de
Sistemas informáticos</td>
</tr>
<tr>
<td bgcolor="#923C29 "> 9:30/10:20<div class="linea"></div></td>
<td bgcolor="#923C29 "> Análisis y Diseño de
Sistemas informáticos</td>
<td bgcolor="#923C29 "> Análisis y Diseño de
Sistemas informáticos</td>
<td bgcolor="#923C29 "> Portales Web</td>
<td bgcolor="#923C29 "> Ciencias de la
Naturaleza</td>
<td bgcolor="#923C29 "> Análisis y Diseño de
Sistemas informáticos</td>
</tr>
<tr>
<td bgcolor="#389540">10:20/10:50<div class="linea"></div></td>
<th align="center" bgcolor="green " colspan="5">
RECREO</th>
</tr>
<tr>
<td bgcolor="#76B473 "> 10:50/11:40<div class="linea"></div></td>
<td bgcolor="#76B473 "> Formación Humana
Integral y Religiosa</td>
<td bgcolor="#76B473 "> Matemáticas</td>
<td bgcolor="#76B473 "> Ofimática</td>
<td bgcolor="#76B473 "> Análisis y Diseño de
Sistemas informáticos</td>
<td bgcolor="#76B473 "> Diseño y Desarrollo
de Base de Datos</td>
</tr>
<tr>
<td bgcolor="##259320 "> 11:40/12:30<div class="linea"></div></td>
<td bgcolor="##259320 "> Formación Humana
Integral y Religiosa</td>
<td bgcolor="##259320 "> Matemáticas</td>
<td bgcolor="##259320 "> Ofimática</td>
<td bgcolor="##259320 "> Análisis y Diseño de
Sistemas informáticos</td>
<td bgcolor="##259320 "> Diseño y
Desarrollo de Base de Datos</td>
</tr>
<tr>
<td bgcolor="#D19C3A "> 12:30/1:30<div class="linea"></div></td>
<th align="center" bgcolor="#D19C3A " colspan="5">
ALMUERZO</th>
</tr>
<tr>
<td bgcolor="#D8D330 "> 1:30/2:20<div class="linea"></div></td>
<td bgcolor="#D8D330 "> Portales Web</td>
<td bgcolor="#D8D330 "> Ofimática</td>
<td bgcolor="#D8D330 "> Inglés</td>
<td bgcolor="#D8D330 "> Lengua Española</td>
<td bgcolor="#D8D330 "> Inglés</td>
</tr>
<tr>
<td bgcolor="#C2BE2B "> 2:20/3:10<div class="linea"></div></td>
<td bgcolor="#C2BE2B "> Portales Web</td>
<td bgcolor="#C2BE2B "> Diseño y Desarrollo
de Base de Datos</td>
<td bgcolor="#C2BE2B "> Inglés</td>
<td bgcolor="#C2BE2B "> Lengua Española</td>
<td bgcolor="#C2BE2B "> Ciencias de la
Naturaleza</td>
</tr>
<tr>
<td bgcolor="#ADA823 "> 3:10/4:00<div class="linea"></div></td>
<td bgcolor="#ADA823 "> Diseño y Desarrollo
de Base de Datos</td>
<td bgcolor="#ADA823 "> Diseño y Desarrollo
de Base de Datos</td>
<td bgcolor="#ADA823 "> Ciencias
Sociales</td>
<td bgcolor="#ADA823 "> Lengua Española</td>
<td bgcolor="#ADA823 "> Educación
Física</td>
</tr>
</table>
<form id="Formulario(Contacto)"></form>
<h1> Formulario(Contacto)</h1>
<form
action="[Link]
method="POST">
<label>
Tu correo:
<input type="email" name="email" placeholder="Escribe tu correo">
<input type="password" placeholder="Escribe tu contraseña"
maxlength="20">
<input type="checkbox" name="género" id="Hombre">Hombre
<input type="checkbox" name="género" id="Mujer">Mujer
</label>
<label>
<select name="" id="">
<option value="Santiago">Santiago</option>
<option value="Santo Domingo">Santo Domingo</option>
<option value="La Vega">La Vega</option>
</select>
Tu mensaje:
<textarea id="mensaje" name="mensaje" placeholder="Escribe tu
mensaje"></textarea>
</label>
<!-- your other form fields go here -->
<button type="submit">Send</button>
</form>
</body>
</html>
Código CSS
.container{
width: 80%;
margin: auto;
}
#menu ul{
display: flex;
padding: 0;
margin: 0;
list-style: none;
}
#menu a{
display: block;
padding: 10px;
background-color: black;
text-decoration: none;
color: burlywood;
}
#menu a:hover{
background-color: gray;
}
#menu ul li ul{
display: none;
}
#menu ul li ul :hover + ul, ul li ul:hover{
display:block;
}