28 - Creación de un menú vertical configurando las pseudoclases.



Problema:

Modificar la hoja de estilo del menú desarrollado anteriormente para que cada opción aparezca una línea de color negro que la recuadre.

<!DOCTYPE html>
<html>
<head>
  <title>Problema</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="menu">
<p><a href="http://www.google.com">Google</a></p>
<p><a href="http://www.yahoo.com">Yahoo</a></p>
<p><a href="http://www.bing.com">Bing</a></p>
<p><a href="http://www.ask.com">Ask</a></p>
</div>
</body>
</html>
#menu {
  font-family: Arial;
}

#menu p {
  margin:0px;
  padding:0px;
}

#menu a {
  display: block;
  padding: 3px;
  width: 160px;
  background-color: #f7f8e8;
  border-bottom: 1px solid #eeeeee;
  text-align:center;
  border:1px solid #000000;
}

#menu a:link, #menu a:visited {
  color: #ff0000;
  text-decoration: none;
}

#menu a:hover {
  background-color: #336699;
  color: #ffffff;
}
Ver solución


Retornar