CSS Ya

Problema:

Implemente un menú horizontal y un menú vertical a la izquierda.

<!DOCTYPE html>
<html>
<head>
  <title>Problema</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>

<ul id="menuhorizontal">
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.yahoo.com">Yahoo</a></li>
<li><a href="http://www.bing.com">Bing</a></li>
<li><a href="http://www.ask.com">Ask</a></li>
</ul>

<div id="menuvertical">
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.yahoo.com">Yahoo</a></li>
<li><a href="http://www.bing.com">Bing</a></li>
<li><a href="http://www.ask.com">Ask</a></li>
</div>
</body>
</html>

#menuhorizontal, #menuvertical {
  margin:5px;
  padding:15px;
  list-style-type:none;
}
#menuhorizontal a {
  width:100px;
  text-decoration:none;
  text-align:center;
  color:#ff0000;
  background-color:#f7f8e8;
  padding:3px 5px;
  border-right:1px solid blue;
  display:block;
}

#menuhorizontal li {
  float:left;
}

#menuhorizontal a:hover,#menuvertical a:hover {
  background-color:#336699;
}

#menuvertical a {
  width:100px;
  text-decoration:none;
  text-align:center;
  color:#ff0000;
  background-color:#f7f8e8;
  padding:3px 5px;
  border-right:1px solid blue;
  display:block;
}

29 - Creación de un menú horizontal con una lista.

Retornar