<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{padding:0px;
margin:0px;}
#header{ margin-left:350px;
width:1000px;
font-family:Trebuchet MS;}
ul, ol{list-style:none;}
.nav li a{background-color:#00ABFF;
color:#FFFFFF;
text-decoration:none;
padding:10px 100px;
display:block;}
.nav li a:hover{background-color:#FFFFFF;
color:#00ABFF;
box-shadow: 5px 5px 5px #D8D8D8;
webkit-transition: color .9s ;
moz-transition: color .9s ease-in-out;
o-transition: color .9s ease-in-out;
ms-transition: color .9s ease-in-out;
transition: color .9s ease-in-out;
webkit-transition: background-color .9s ease-in-out;
moz-transition: background-color .9s ease-in-out;
o-transition: background-color .9s ease-in-out;
ms-transition: background-color .9s ease-in-out;
transition: background-color .9s ease-in-out;}
.nav > li{float:left;}
.nav li ul{visibility:hidden;
opacity:0;
transition:visibility 0s,opacity 1s linear;
position:absolute;
}
.nav li:hover > ul{visibility:visible;opacity:1;}
.nav li ul li{position:relative;}
.nav li ul li ul{right:-279px;top:0px;}
</style>
</head>
<body>
<div id="header">
<ul class="nav">
<li><a href= "">Inicio</a></li>
<li><a href= "">Servicio</a>
<ul>
<li><a href="#">Ir a pagina 1</a></li>
<li><a href="">Submenu 2</a></li>
<li><a href="">Submenu 3</a></li>
<li><a href="">Submenu 4</a>
<ul>
<li><a href="">Submenu 1</a></li>
<li><a href="">Submenu 2</a></li>
<li><a href="">Submenu 3</a></li>
<li><a href="">Submenu 4</a>
<ul>
<li><a href="">Submenu 1</a></li>
<li><a href="">Submenu 2</a></li>
<li><a href="">Submenu 3</a></li>
<li><a href="">Submenu 4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href= "">Contacto</a></li>
</ul>
</div>
</body>
</html>