1<html>
2 <head>
3 <title>Menu Desplegable</title>
4 <style type="text/css">
5
6 * {
7 margin:0px;
8 padding:0px;
9 }
10
11 #header {
12 margin:auto;
13 width:500px;
14 font-family:Arial, Helvetica, sans-serif;
15 }
16
17 ul, ol {
18 list-style:none;
19 }
20
21 .nav > li {
22 float:left;
23 }
24
25 .nav li a {
26 background-color:#000;
27 color:#fff;
28 text-decoration:none;
29 padding:10px 12px;
30 display:block;
31 }
32
33 .nav li a:hover {
34 background-color:#434343;
35 }
36
37 .nav li ul {
38 display:none;
39 position:absolute;
40 min-width:140px;
41 }
42
43 .nav li:hover > ul {
44 display:block;
45 }
46
47 .nav li ul li {
48 position:relative;
49 }
50
51 .nav li ul li ul {
52 right:-140px;
53 top:0px;
54 }
55
56 </style>
57 </head>
58 <body>
59 <div id="header">
60 <ul class="nav">
61 <li><a href="">Inicio</a></li>
62 <li><a href="">Servicios</a>
63 <ul>
64 <li><a href="">Submenu1</a></li>
65 <li><a href="">Submenu2</a></li>
66 <li><a href="">Submenu3</a></li>
67 <li><a href="">Submenu4</a>
68 <ul>
69 <li><a href="">Submenu1</a></li>
70 <li><a href="">Submenu2</a></li>
71 <li><a href="">Submenu3</a></li>
72 <li><a href="">Submenu4</a></li>
73 </ul>
74 </li>
75 </ul>
76 </li>
77 <li><a href="">Acerca de</a>
78 <ul>
79 <li><a href="">Submenu1</a></li>
80 <li><a href="">Submenu2</a></li>
81 <li><a href="">Submenu3</a></li>
82 <li><a href="">Submenu4</a></li>
83 </ul>
84 </li>
85 <li><a href="">Contacto</a></li>
86 </ul>
87 </div>
88 </body>
89</html>
90