Ejercicio de HTML - Listas de enlaces

Crear el archivo "listas-de-enlaces.html":

Visualización del archivo listas-de-enlaces.html en Google Chrome, con enlaces a Bing, Google, Facebook y Twitter.

En dicho archivo se debe escribir la siguiente estructura de listas anidadas (fíjese que hay dos listas dentro de otra):

    <ul>
      <li>Buscadores
        <ul>
          <li>...</li>
          <li>...</li>
        </ul>
      </li>
      <li>Redes sociales
        <ul>
          <li>...</li>
          <li>...</li>
        </ul>
      </li>
    </ul>

En el documento, al hacer clic sobre los enlaces "Bing", "Google", "Facebook" y "Twitter", se accederá en nuevas pestañas a las direcciones web siguientes:

http://www.bing.com/
http://www.google.com/
http://www.facebook.com/
http://www.twitter.com/

Además, hay que tener en cuenta las siguientes consideraciones:

El texto de los enlaces no visitados –en este caso "Facebook" y "Twitter"– debe mostrarse de color rojo (color:red;), y estar subrayado (la opción por defecto del navegador).
Al pasar el puntero del ratón por encima del texto de un enlace que todavía no se haya visitado, el color cambiará de rojo a verde (color:green;) y no se mostrará subrayado (text-decoration:none;). En la imagen es el caso del enlace a "Google".
El texto de un enlace a un sitio web ya visitado se mostrará de color púrpura (color:purple;), como es el caso del enlace a "Bing".
El texto de un enlace activo debe ser de color lima (color:lime;). Por ejemplo, véase en la siguiente imagen que el enlace a "Twitter" está activo, es decir, se está haciendo clic sobre él:

Visualización del archivo listas-de-enlaces.html en Google Chrome, con enlaces un enlace activo.

A continuación, se muestra el código necesario para cumplir dichas consideraciones:

      a:link {
        color:red;
      }
      a:hover {
        color:green;
        text-decoration:none;
      }
      a:visited {
        color:purple;
      }
      a:active {
        color:lime;
      }

También hay que cumplir las siguientes indicaciones:

El tipo de letra utilizado en todo el documento es Verdana.
El color de fondo de pantalla es amarillo (color:yellow;).
El texto "Listas de enlaces" está escrito dentro de un elemento "h1" definido de color naranja (color:orange;), tamaño 20px y centrado.
Todos los textos contenidos en los elementos "li" de las listas, tienen un tamaño de 15px.

Solución:

"listas-de-enlaces.html"

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <title>Ejercicio - Listas de enlaces</title>
    <style>
      a:link {
        color:red;
      }
      a:hover {
        color:green;
        text-decoration:none;
      }
      a:visited {
        color:purple;
      }
      a:active {
        color:lime;
      }
      body {
        background:yellow;
        font-family:verdana;
      }
      h1 {
        color:orange;
        font-size:20px;
        text-align:center;
      }
      li {
        font-size:15px;
      }
    </style>
  </head>
  <body>
    <h1>Listas de enlaces</h1> 
    <ul>
      <li>Buscadores
        <ul>
          <li><a href="http://www.bing.com/" target="_blank">Bing</a></li>
          <li><a href="http://www.google.com/" target="_blank">Google</a></li>
        </ul>
      </li>
      <li>Redes sociales
        <ul>
          <li><a href="http://www.facebook.com/" target="_blank">Facebook</a></li>
          <li><a href="http://www.twitter.com/" target="_blank">Twitter</a></li>
        </ul>
      </li>
    </ul>
  </body>
</html>