*{
padding: 0;
margin: 0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing: border-box;
}
.contenedor {
background: #ccc;
width: 90%;
max-width: 1000px;
margin: auto;
/*Flex*/
display: flex;
flex-flow: row wrap;
}
body {
background: #e9e9e9;
}
header {
background: #2c3e50;
width: 100%;
padding: 70px;
/*Flex*/
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
}
header .logo {
color: white;
font-size: 40px;
}
header .logo img {
width: 50px;
vertical-align: top;
}
header .logo a {
color: #FFFFFF;
text-decoration: none;
line-height: 60px;
font-family: 'Kaushan Script', cursive;
}
header nav {
width: 50%;
/*flex*/
display: flex;
flex-wrap: wrap;
align-items: center;
}
header nav a {
background: #c0392b;
color: white;
text-align: center;
text-decoration: none;
padding: 20px;
/* flex*/
flex-grow: 1;
}
header nav a:hover {
background: #e67e22;
}
/* Menu Header */
nav {
max-width:1000px;
width: 90%;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
}
nav ul {
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
}
nav > ul {
display:table;
width:100%;
background: #c0392b;
position: relative;
}
nav > ul li {
display: table-cell;
}
/* Submenu */
nav > ul > li:hover > ul {
display: block;
height: 100%;
}
nav > ul > li > ul {
left: 0;
right: 0;
display: block;
position:absolute;
background: #c0392b;
overflow:hidden;
height: 0;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
nav > ul li a {
color: white;
display: block;
line-height: 20px;
padding: 10px;
position: relative;
text-align: center;
text-decoration: none;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
flex-grow: 1;
}
nav > ul > li > ul > li a:hover {
background: #e67e22;
}
/* Submenu-Submenu*/
nav > ul > li > ul > li > ul {
left: 0;
right: 0;
display: block;
position:absolute;
background: #c0392b;
overflow:hidden;
height: 0;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
nav > ul > li > ul > li > ul li a {
color: white;
display: block;
line-height: 20px;
padding: 10px;
position: relative;
text-align: center;
text-decoration: none;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
flex-grow: 1;
}
nav > ul > li > ul > li > ul > li a:hover {
background: #e67e22;
}<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Er tour- una nueva forma de vivir tu ciudad y tu entorno</title>
<meta name="description" content="">
<meta name="viewpot" content="width=device-width, user-scable=no, initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="estilos.css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="fonts.css">
</head>
<body>
<div class="contenedor">
<header>
<div class="logo">
<img src="imagenes/logo_web.jpg" width="150" alt="">
<a href="www.ertour.com">Er Tour</a>
</div>
<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="Servicios en Sevilla.html">Servicios en Sevilla</a>
<ul>
<li><a href="#">Rutas</a>
<ul>
<li><a href="#">San Fernando-Plaza de Velazquez</a></li>
<li><a href="#">Puerta de Jerez-Palacio de San Telmo</a></li>
</ul>
</li>
<li><a href="#">Rutas en Espacios Verdes</a></li>
<li><a href="#">Rutas en Jardines</a></li>
</ul>
</li>
<li><a href="Servicios fuera de Sevilla.html">Servicios Fuera de Sevilla</a>
<ul>
<li><a href="#">Rutas en Espacios Verdes Naturales</a></li>
</ul>
</li>
</ul>
</nav>
</header>
</div>
</body>
</html>Good afternoon everyone,
I want to put a submenu inside a main submenu, but the drawback I have is that this last submenu I can not see it in the browser, it appears as hidden. What can I do?
The section that I can not see is the one of Routes that must break down another submenu.
Thanks for the contributions.