Módulo 2 - Tema 3: Ejercicio P2P opcional

Explicación de la tarea

Realizar el CSS de un menú vertical de este html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Menú</title>
</head>
<body>
<nav>
<h1>Discover </h1>
<ul>

<li><a href="#" class="welcome">Welcome</a></li>
<li><a href="#" class="featured">Featured</a></li>
<li><a href="#" class="people">People</a></li>
<li><a href="#" class="music">Music</a></li>
<li><a href="#" class="mixes">Mixes </a></li>
<li><a href="#" class="videos">Videos</a></li>
<li><a href="#" class="radio">Radio</a></li>

</ul>
</nav>
</body>
</html>

Realizar el CSS de un menú horizontal de este html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Menú</title>
</head>
<body>
<nav>
<h1>BBC</h1>
<ul>

<li class="news"> <a href="#">News</a> </li>
<li class="sport"> <a href="#">Sport</a> </li>
<li class="weather"> <a href="#">Weather</a> </li>
<li class="capital"> <a href="#">Capital</a> </li>
<li class="culture"> <a href="#">Culture</a> </li>
<li class="autos"> <a href="#">Autos</a> </li>
<li class="tv"> <a href="#">TV</a> </li>
<li class="radio"> <a href="#">Radio</a> </li>
<li class="more"> <a href="#">More...</a> </li>

</ul>
<div class="clear"> </div>
</nav>
</body>
</html>

Solución 1

See the Pen Menú vertical by Alberto (@albertomarin) on CodePen.

Solución 2

See the Pen Menú horizontal by Alberto (@albertomarin) on CodePen.