Código HTML :
<html>
<head>
<title>Menu </title>
<meta charset="utf-8">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'></script>
<script language="javascript">
$(document).ready(function(){
$("#firstpane p.menu_head").click(function(){
$(this).removeClass("menu_head").addClass("menu_head_open").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().removeClass("menu_head_open").addClass("menu_head");
});
$("#firstpane2 p.menu_head").click(function(){
$(this).removeClass("menu_head").addClass("menu_head_open").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().removeClass("menu_head_open").addClass("menu_head");
});
});
</script>
<style>
.menu_list {
width: 360px; /* Ancho del menú */
background-color:rgba(0,153,255,1);
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
-webkit-border-top-right-radius:3px;
-webkit-border-top-left-radius:3px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-topleft:0px;
-moz-border-radius-bottomright:3px;
-moz-border-radius-topright:3px;
border-bottom-left-radius:0px;
border-top-left-radius:0px;
border-bottom-right-radius:3px;
border-top-right-radius:3px;
}
.menu_list:hover { z-index:5; }
.menu_list table{
width:100%;
}
.menu_head {
padding: 5px 10px;
color:#FFF; /* Color de las pestañas principales */
cursor: default;
position: relative;
margin:1px;
margin-left:0;
margin-right:0;
font-weight:bold;
font-size:13px;
background-color:transparent;
background-image: url(../imgs/flecha-abajo.png);
background-position:center right;
background-repeat:no-repeat;
}
.menu_head:hover { background-color:rgba(4,82,128,.7); color:#FFFFFF; }
.menu_head_open {
padding: 5px 10px;
color:#FFF; /* Color de las pestañas principales */
cursor: default;
position: relative;
margin:1px;
margin-left:0;
margin-right:0;
font-weight:bold;
font-size:13px;
background-color:rgba(4,82,128,.7);
background-image: url(../imgs/flecha-arriba.png);
background-position:center right;
background-repeat:no-repeat;
}
.menu_body { display:none; background-color:rgba(4,82,128,.7); background-image:none; padding-left:20px; margin-top:-1px;}
.menu_body a{
display:block;
color:#FFF; /* Color de los enlaces */
padding-top:8px;
font-weight:bold;
text-decoration:none;
border-bottom:1px dotted #fff;
}
.menu_body a:hover{
color: #fff; /* Color de los enlaces al pasar el cursor */
border:1px dotted #FFF;
}
</style>
</head>
<body>
Con table
<div id="firstpane" class="menu_list">
<table>
<tbody>
<tr>
<td>
<p class="menu_head">Menu 1</p>
<div class="menu_body">
<a href="#">Opc 1</a>
<a href="#">Opc 2</a>
<a href="#">Opc 3</a>
<a href="#">Opc 4</a>
</div>
</td>
</tr>
<tr>
<td>
<p class="menu_head">Menu 2</p>
<div class="menu_body">
<a href="#">Opc 1</a>
<a href="#">Opc 2</a>
<a href="#">Opc 3</a>
</div>
</td>
</tr>
<tr>
<td>
<p class="menu_head">Menu 3</p>
<div class="menu_body">
<a href="#">Opc 1</a>
<a href="#">Opc 2</a>
<a href="#">Opc 3</a>
<a href="#">Opc 4</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<hr>
Sin table
<div id="firstpane2" class="menu_list">
<p class="menu_head">Menu 1</p>
<div class="menu_body">
<a href="#">Opc 1</a>
<a href="#">Opc 2</a>
<a href="#">Opc 3</a>
<a href="#">Opc 4</a>
</div>
<p class="menu_head">Menu 2</p>
<div class="menu_body">
<a href="#">Opc 1</a>
<a href="#">Opc 2</a>
<a href="#">Opc 3</a>
</div>
<p class="menu_head">Menu 3</p>
<div class="menu_body">
<a href="#">Opc 1</a>
<a href="#">Opc 2</a>
<a href="#">Opc 3</a>
<a href="#">Opc 4</a>
</div>
</div>
</body>
</html>
