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