Codigo HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
<style type="text/css">
body {
background-color: #033;
}
</style>
<link href="menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="menudenavegacion">
<li><a href="#">Elemento1</a>
<li><a href="#">Elemento2</a>
<ul>
<li><a href="#">Elemento2.1</a>
<li><a href="#">Elemento2.2</a>
<li><a href="#">Elemento2.3</a>
<ul>
<li><a href="#">Elemento2.3.1</a>
<li><a href="#">Elemento2.3.2</a>
<li><a href="#">Elemento2.3.3</a>
<ul>
<li><a href="#">Elemento2.3.3.1</a>
<li><a href="#">Elemento2.3.3.2</a>
<li><a href="#">Elemento2.3.3.3</a>
<li><a href="#">Elemento2.3.3.4</a>
</ul>
<li><a href="#">Elemento2.3.4</a>
</ul>
<li><a href="#">Elemento2.4</a>
</ul>
<li><a href="#">Elemento3</a>
</ul>
</body>
</html>
Codigo CSS:
@charset "utf-8";
/* CSS Document */
<!--Reglas de Estilos Para el Menú-->
#menudenavegacion{
width: auto;
height: auto;
}
#menudenavegacion{
list-style:none;
font-family:Arial, Helvetica, sans-serif;
}
#menudenavegacion > li{
float:left;
padding-left:50px;
margin-left:-20px;
}
#menudenavegacion ul li {
list-style:none;
background-color:#09F;
text-align:left;
width:200px;
}
#menudenavegacion ul li ul li{
margin-left:200px;
}
#menudenavegacion ul li ul{
margin-top:-30px;
}
#menudenavegacion li a{
display:block;
color:#FFF;
padding-top: -8pt;
padding-right: 5pt;
padding-bottom: 7pt;
padding-left: 5pt;
text-decoration:none;
text-transform: uppercase;
}
#menudenavegacion > li a:hover{
display:block;
background-image: url(https://lh5.googleusercontent.com/-D36XrJ0jqp8/TzldpgnFNqI/AAAAAAAAAAk/tnb79T1FhyY/s20/flecha.png);
background-repeat:no-repeat;
background-position:bottom;
padding-top: -8pt;
padding-right: 5pt;
padding-bottom: 7pt;
padding-left: 5pt;
text-transform: uppercase;
}
/*Para subrayar un elemento del SubMenu Con SubMenu*/
#menudenavegacion li ul > li:hover{
background-image:inherit;
background-color:#06F;
}
/*Para quitar herencia de la viñeta abajo de fondo*/
#menudenavegacion li ul li a:hover{
background-image:inherit;
background-color:#06F;
}
#menudenavegacion ul{
display:none;
}
#menudenavegacion ul ul{
display:none;
}
/*Para Desplegar SubMenu*/
#menudenavegacion li:hover > ul{
display:block;
margin-left:-40px;
position:absolute;
}
#menudenavegacion ul ul ul{
margin-left:100px;
margin-top:-30px;
}
