Alguien sabe como cargar contenido dentro de la misma pagina con este menu...
<html>
<head>
<style type="text/css">
#menu {
background: none repeat scroll 0 0 #5BB0DB;
height: 34px;
margin: 10px 0;
position: relative;
}
#nav {
display: block;
margin: 0 5px;
padding: 0;
position: absolute;
}
#nav > li {
display: block;
float: left;
list-style-type: none;
margin: 0 10px;
padding: 10px;
position: relative;
width: 100px;
}
#nav > li:hover ul {
display: block;
}
#nav > li:hover {
background-color: #AAD4FF;
opacity: 0.9;
}
#nav li ul {
display: none;
margin: 0;
padding: 0;
}
#nav li ul li {
list-style-type: none;
margin: 10px 0 0;
}
#nav li ul li a {
color: #FFFFFF;
display: block;
padding: 5px 10px;
text-decoration: none;
}
#nav li ul li:hover a {
background-color: #5BB0DB;
margin: 0;
}
#nav li span {
color: #FFFFFF;
cursor: pointer;
font-weight: bold;
margin: 0 10px;
}
</style>
</head>
<body>
<div id="menu">
<ul id="nav">
<li><span>Menu 1</span>
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
</ul>
</li>
<li><span>Menu 2</span>
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
</ul>
</li>
<li><span>Menu 3</span>
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>