JSFiddle - React, Tailwind, and code Playground
HTML
<!--Cabeza de página-->
<!DOCTYPE html>
<head>
<title>Servicios | Podología y Estética | Santiago Centro</title>
<meta name="description" content="Centro de Podología y Estética en Santiago Centro. Atención profesional y buen ambiente. Paseo Estado 25 ¡Visítenos!">
<meta name="keywords" content="podologia santiago centro, podologa santiago centro, podologia centro, uña encarnada, pies, santiago, centro, calle estado, pie en remojo, podologia clinica, masajes, masaje express, masaje relajacion, masaje descontracturante, masaje reductivo, reflexologia">
<meta name="author" content="Cristian Chehade / Felipe Tamayo">
<meta charset="UTF-8">
<link rel="StyleSheet" href="estilos.css" type="text/css">
<link rel="StyleSheet" href="menu.css" type="text/css">
<script src="swapimgrestore.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="menu.js"></script>
</head>
<body id="masaje">
<!--Cabeza de página-->
<!--Tabla general-->
<table style="margin: auto; width: 960px;">
<!--Primera fila-->
<tr>
<td style="width: 960px; height: 100px; background-image: url(images/arriba.png);">
<div style="text-align: center; height: 100px;"><img src="images/titulo.png" alt="titulo" height="100"></div></td>
</tr>
<!--Segunda fila-->
<tr>
<td style="width: 960px; height: 60px;">
<table>
<tr>
<td style="width: 35px;"> <img src="images/menu.png" alt=""></td>
<td style="width: 150px;"><a href="index.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','images/menu_a_over.png',1)"><img alt="" src="images/menu_a.png" id="Image1" width="150" height="60" /></a></td><td style="width: 35px;"><img src="images/menu.png" alt=""></td>
<td style="width: 150px;"><a href="quienes.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/menu_b_over.png',1)"><img alt="" src="images/menu_b.png" id="Image2" width="150" height="60" /></a></td><td style="width: 35px;"><img src="images/menu.png"...
CSS
/* Vertical menu */
#menu li
{
margin: 0 0 3px 0;
}
#menu a
{
display: block;
*display: inline-block;
*width: 240px;
text-decoration: none;
background: #ddd;
color: #444;
padding: 10px 5px;
text-transform: uppercase;
font: bold 12px Arial,Helvetica;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-moz-box-shadow: 0 1px 0 #ccc;
-webkit-box-shadow: 0 1px 0 #ccc;
box-shadow: 0 1px 0 #ccc;
}
#menu a:hover
{
color: #eee;
background: #9c9c9c;
background: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#999));
background: -webkit-linear-gradient(top, #bbb, #999);
background: -moz-linear-gradient(top, #bbb, #999);
background: -ms-linear-gradient(top, #bbb, #999);
background: -o-linear-gradient(top, #bbb, #999);
background: linear-gradient(top, #bbb, #999);
}
#menu .expandable
{
position: relative;
}
#menu .expandable:before,
#menu .expandable:after
{
content: '';
position: absolute;
right: 5px;
margin-top: 5px;
border-top: 6px solid #444;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}
#menu .expandable:before
{
border-top-color: #fff;
margin-top: 6px;
}
#menu .expanded:after
{
border-top: 0;
border-bottom: 6px solid #444;
}
#menu .expanded:before
{
border-top: 0;
...
JavaScript
function initMenu() {
$('#menu ul').hide(); // Hide the submenu
if ($('#menu li').has('ul')) $('#menu ul').prev().addClass('expandable'); // Expand/collapse a submenu when it exists
$('.expandable').click(
function() {
$(this).next().slideToggle();
$(this).toggleClass('expanded');
return false;
});
var l = document.getElementById('link');
l.click();
}
// When document ready, call initMenu() function
$(document).ready(function() {
initMenu();
});