Manejadores semánticos: Ejemplo.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<!-- Estilo Css -->
<style type="text/css">
#menu ul,#menu li,#menu span,#menu a {
position: relative;
margin: 0;
padding: 0;
}
#menu {
height: 49px;
border-radius: 10px;
background: violet;
border-bottom: 2px solid #0fa1e0;
width: auto;
}
#menu:after, #menu ul:after {
content: '';
display: block;
clear: both;
}
#menu a {
background: violet;
color: #fff;
display: inline-block;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
line-height: 49px;
padding: 0 20px;
text-decoration: none;
}
#menu ul {
list-style: none;
}
#menu > ul {
float: left;
}
#menu > ul > li {
float: left;
}
#menu > ul > li > a {
color: #fff;
font-size: 12px;
}
#menu > ul > li:first-child > a {
border-radius: 5px 0 0 0;
}
#menu > ul > li:ultimoelemento-child > a {
border-radius: 0 5px 0 0;
}
#menu > ul > li.elementomenu > a {
-webkit-box-shadow: inset 0 0 3px #000000;
background: #070707;
}
#menu > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #0fa1e0;
margin-left: -10px;
}
#menu > ul > li:hover > a {
background: gray;
box-shadow: inset 0 0 3px #fff;
}
#menu .subelemento {
z-index: 1;
}
#menu .subelemento:hover > ul {
display: block;
}
#menu .subelemento ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#menu .subelemento ul li {
*margin-bottom: -1px;
}
#menu .subelemento ul li a {
background: gray;
border-bottom: 1px dotted #31b7f1;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
color: #ffffff;
}
#menu .subelemento ul li:hover a {
background: #000;
}
#menu .subelemento .subelemento:hover > ul {
display: block;
}
#menu .subelemento .subelemento ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#menu .subelemento .subelemento ul li a {
background: gray;
border-bottom: 1px dotted #31b7f1;
}
#menu .subelemento .subelemento ul li a:hover {
background: violet;
}
</style>
<!-- Código JavaScript -->
<script type="text/javascript">
window.onload = function(){
window.document.getElementById('msId').onclick = mensaje;
window.document.getElementById('ImgMsId').onmouseover = cambioColor;
window.document.getElementById('ImgMsId').onmouseout = colorOriginal;
}
function mensaje(){
alert('Manejador semántico con ID');
}
function cambioColor(){
window.document.body.bgColor = '#0fa1e0';
}
function colorOriginal(){
window.document.body.bgColor = '#fff';
}
</script>
</head>
<body>
<div id='menu'>
<ul>
<li class='elementomenu'><a href='#' id="msId"><span>Inicio</span></a></li>
<li class='subelemento'><a href='#'><span>Complejo</span></a>
<ul>
<li class='subelemento'><a href='#'><span>Instalaciones</span></a>
<ul>
<li><a href='#'><span>Cabañas</span></a></li>
<li class='ultimoelemento'><a href='#'><span>Zona de Recreación</span></a></li>
</ul>
</li>
<li class='subelemento'><a href='#'><span>Servicios</span></a>
<ul>
<li><a href='#'><span>Desayuno Americano</span></a></li>
<li class='ultimoelemento'><a href='#'><span>Spa</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>Reservas</span></a></li>
<li class='ultimoelemento'><a href='#' id="ImgMsId"><span>Contacto</span></a></li>
</ul>
</div>
</body>
</html>
<!--
li {
display: list-item;
text-align: -webkit-match-parent;
} -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<!-- Estilo Css -->
<style type="text/css">
#menu ul,#menu li,#menu span,#menu a {
position: relative;
margin: 0;
padding: 0;
}
#menu {
height: 49px;
border-radius: 10px;
background: violet;
border-bottom: 2px solid #0fa1e0;
width: auto;
}
#menu:after, #menu ul:after {
content: '';
display: block;
clear: both;
}
#menu a {
background: violet;
color: #fff;
display: inline-block;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
line-height: 49px;
padding: 0 20px;
text-decoration: none;
}
#menu ul {
list-style: none;
}
#menu > ul {
float: left;
}
#menu > ul > li {
float: left;
}
#menu > ul > li > a {
color: #fff;
font-size: 12px;
}
#menu > ul > li:first-child > a {
border-radius: 5px 0 0 0;
}
#menu > ul > li:ultimoelemento-child > a {
border-radius: 0 5px 0 0;
}
#menu > ul > li.elementomenu > a {
-webkit-box-shadow: inset 0 0 3px #000000;
background: #070707;
}
#menu > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #0fa1e0;
margin-left: -10px;
}
#menu > ul > li:hover > a {
background: gray;
box-shadow: inset 0 0 3px #fff;
}
#menu .subelemento {
z-index: 1;
}
#menu .subelemento:hover > ul {
display: block;
}
#menu .subelemento ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#menu .subelemento ul li {
*margin-bottom: -1px;
}
#menu .subelemento ul li a {
background: gray;
border-bottom: 1px dotted #31b7f1;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
color: #ffffff;
}
#menu .subelemento ul li:hover a {
background: #000;
}
#menu .subelemento .subelemento:hover > ul {
display: block;
}
#menu .subelemento .subelemento ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#menu .subelemento .subelemento ul li a {
background: gray;
border-bottom: 1px dotted #31b7f1;
}
#menu .subelemento .subelemento ul li a:hover {
background: violet;
}
</style>
<!-- Código JavaScript -->
<script type="text/javascript">
window.onload = function(){
window.document.getElementById('msId').onclick = mensaje;
window.document.getElementById('ImgMsId').onmouseover = cambioColor;
window.document.getElementById('ImgMsId').onmouseout = colorOriginal;
}
function mensaje(){
alert('Manejador semántico con ID');
}
function cambioColor(){
window.document.body.bgColor = '#0fa1e0';
}
function colorOriginal(){
window.document.body.bgColor = '#fff';
}
</script>
</head>
<body>
<div id='menu'>
<ul>
<li class='elementomenu'><a href='#' id="msId"><span>Inicio</span></a></li>
<li class='subelemento'><a href='#'><span>Complejo</span></a>
<ul>
<li class='subelemento'><a href='#'><span>Instalaciones</span></a>
<ul>
<li><a href='#'><span>Cabañas</span></a></li>
<li class='ultimoelemento'><a href='#'><span>Zona de Recreación</span></a></li>
</ul>
</li>
<li class='subelemento'><a href='#'><span>Servicios</span></a>
<ul>
<li><a href='#'><span>Desayuno Americano</span></a></li>
<li class='ultimoelemento'><a href='#'><span>Spa</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>Reservas</span></a></li>
<li class='ultimoelemento'><a href='#' id="ImgMsId"><span>Contacto</span></a></li>
</ul>
</div>
</body>
</html>
<!--
li {
display: list-item;
text-align: -webkit-match-parent;
} -->