Menú Plus
<div id="menue18">
<ul>
<li class="level1"><a href="#"><strong>Opción 1</strong> <span class="info"> -
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.</span></a>
<ul>
<li class="level2"><a href="#">Opción 1.1</a></li>
<li class="level2"><a href="#">Opción 1.2</a></li>
</ul>
</li>
<li class="level1"><a href="#"><strong>Opción 2</strong> <span class="info"> -
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.</span></a>
<ul>
<li class="level2"><a href="#">Opción 2.1</a></li>
<li class="level2"><a href="#">Opción 2.2</a>
<ul>
<li class="level3"><a href="#">Opción 2.2.1</a></li>
<li class="level3"><a href="#">Opción 2.2.2</a></li>
</ul>
</li>
</ul>
</li>
<li class="level1"><a href="#"><strong>Opción 3</strong> <span class="info"> -
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat.</span></a>
<ul>
<li class="level2"><a href="#">Opción 3.1</a></li>
<li class="level2"><a href="#">Opción 3.2</a></li>
</ul>
</li>
</ul>
</div>
#menue18 {
position: relative;
margin: 20px 0;
}
#menue18 ul {
list-style: none;
margin: 0;
padding: 0;
}
#menue18 li.level1 {
width: 100px;
padding: 2px 5px 2px 10px;
font-variant: small-caps;
border: 1px solid;
border-color: #3380cc #000 #000 #3380cc;
background-color: #035485;
color: #fc0;
}
#menue18 li.level2 {
width: 120px;
margin-top: 2px;
margin-left: 10px;
padding: 2px 5px;
border: 1px solid;
border-color: #3385ff #000 #000 #3385ff;
background-color: #0472b3;
color: #fc0;
}
#menue18 li.level3 {
width: 140px;
margin-top: 2px;
margin-left: 15px;
padding: 2px 5px;
border: 1px solid;
border-color: #39f #000 #000 #39f;
background-color: #048adb;
color: #fc0;
}
#menue18 li.level1 a,
#menue18 li.level2 a,
#menue18 li.level3 a {
display: block;
padding-left: 5px;
text-decoration: none;
}
#menue18 li.level1 a:link,
#menue18 li.level1 a:visited,
#menue18 li.level1 a:active {
background-color: transparent;
color: #e1cba2;
}
#menue18 li.level1 a:hover {
background-color: transparent;
color: #eee2cc;
width: auto;
}
#menue18 li.level2 a:link,
#menue18 li.level3 a:link,
#menue18 li.level2 a:visited,
#menue18 li.level3 a:visited,
#menue18 li.level2 a:active,
#menue18 li.level3 a:active {
background-color: transparent;
color: #eee2cc;
border: 1px solid;
}
#menue18 li.level2 a:link,
#menue18 li.level2 a:visited,
#menue18 li.level2 a:active {
border-color: #0472b3;
}
#menue18 li.level3 a:link,
#menue18 li.level3 a:visited,
#menue18 li.level3 a:active {
border-color: #048adb;
}
#menue18 li.level2 a:hover,
#menue18 li.level3 a:hover {
padding-left: 6px;
background-color: transparent;
color: #fff;
border: 1px solid;
}
#menue18 li.level2 a:hover {
border-color: #035485 #048adb #048adb #035485;
}
#menue18 li.level3 a:hover {
border-color: #0472b3 #24aafb #24aafb #0472b3;
}
#menue18 .level1 a span.info {
display: none;
}
#menue18 .level1 a:hover span.info {
position: absolute;
display: block;
top: 30px;
left: 220px;
width: 200px;
background: #035485;
color: #eee2cc;
padding: 10px;
font-variant: normal;
text-align: left;
border: 1px solid;
border-color: #3385ff #000 #000 #3385ff;
}
Índice Capítulo 7
Contenido material adicional