How to fix 'my dropdown' with three levels - html

Question

I am trying to make a drop-down with three levels. But when I hover the first level, the second one appears a little over the first level and on the left side. I want to have the second level in the middle of the first level. And I don't know how can I have a third level in the right side of the second level.
.middle,
.bottom {
background-color: #1565c0;
width: 100%;
overflow: hidden;
}
.middle ul.top-level-menu li:after,
.bottom ul.top-level-menu li:after {
height: 3px;
width: 0px;
content: '';
display: block;
margin: auto;
background: transparent;
transition: width 0.5s ease, background-color 0.5s ease;
}
.middle ul.top-level-menu li:hover:after,
.bottom ul.top-level-menu li:hover:after {
width: 100%;
background: #003c8f;
}
.middle ul.top-level-menu,
.bottom ul.top-level-menu {
padding: 0;
margin: 0;
list-style-type: none;
}
.middle ul.top-level-menu>li,
.bottom ul.top-level-menu>li {
width: 25%;
padding: 10px;
float: left;
text-align: center;
text-align: -webkit-center;
text-align: -moz-center;
z-index: 1;
}
.middle ul.top-level-menu>li:hover,
.bottom ul.top-level-menu>li:hover {
cursor: hand;
}
.middle ul.top-level-menu>li:hover>ul.second-level-menu,
.bottom ul.top-level-menu>li:hover>ul.second-level-menu {
display: block;
position: absolute;
padding: 10px 14px;
list-style-type: none;
}
.middle ul.top-level-menu a,
.bottom ul.top-level-menu a {
font-family: 'Kanit', sans-serif;
font-size: 17px;
color: #fff;
text-decoration: none;
}
.middle ul.top-level-menu li ul.second-level-menu,
.bottom ul.top-level-menu li ul.second-level-menu {
display: none;
background-color: #1565c0;
z-index: 1;
emphasized text border-top: 5px solid #f00;
}
.middle ul.top-level-menu li ul.second-level-menu li ul.third-level-menu,
.bottom ul.top-level-menu li ul.second-level-menu li ul.third-level-menu {
display: none;
z-index: 1;
}
<nav role="navigation">
<div class="middle">
<ul class="top-level-menu">
<li>
Acerca
<ul class="second-level-menu">
<li>Historia</li>
<li>Misión y Visión</li>
<li>Organigrama</li>
</ul>
</li>
<li>
Carreras
<ul class="second-level-menu">
<li>Enfermería</li>
<li>Informática</li>
<li>Gastronomía
<li>
<li>Contabilidad</li>
</ul>
</li>
<li>
Admisión
<ul class="second-level-menu">
<li>Chicago</li>
<li>Los Angeles</li>
<li>
New York
<ul class="third-level-menu">
<li>Information</li>
<li>Book a Meeting</li>
<li>Testimonials</li>
<li>Jobs</li>
</ul>
</li>
<li>Seattle</li>
</ul>
</li>
<li>Calendario</li>
</ul>
</div>
</nav>
Here a little picture of the output:

Answer 1

I have updated your code below - I have added many small changes.
Some notes to remember:
1). An absolute element (almost always) should have a parent which is "relative". Your child "ul" containers were set to absolute, but the parent "li" elements were not set to "position: relative", hence the "ul"-s could not be positioned properly.
2). In order to position your 2nd level to center I gave it a width: 70%, 10% from left and right, 5% padding for left and right.
.middle,
.bottom {
background-color: #1565c0;
width: 100%;
display: table;
}
.middle ul.top-level-menu li:after,
.bottom ul.top-level-menu li:after {
height: 3px;
width: 0px;
content: '';
display: block;
margin: auto;
background: transparent;
transition: width 0.5s ease, background-color 0.5s ease;
}
.middle ul.top-level-menu li:hover:after,
.bottom ul.top-level-menu li:hover:after {
width: 100%;
background: #003c8f;
}
.middle ul.top-level-menu,
.bottom ul.top-level-menu {
padding: 0;
margin: 0;
list-style-type: none;
}
.middle ul.top-level-menu>li,
.bottom ul.top-level-menu>li {
width: 23%;
padding: 10px 1%;
float: left;
text-align: center;
text-align: -webkit-center;
text-align: -moz-center;
position: relative;
}
.middle ul.top-level-menu>li:hover,
.bottom ul.top-level-menu>li:hover {
cursor: hand;
}
.middle ul.top-level-menu a,
.bottom ul.top-level-menu a {
font-family: 'Kanit', sans-serif;
font-size: 17px;
color: #fff;
text-decoration: none;
}
.middle ul.top-level-menu li ul.second-level-menu,
.bottom ul.top-level-menu li ul.second-level-menu {
display: none;
background-color: #1565c0;
border-top: 5px solid #f00;
}
.middle ul.top-level-menu>li:hover>ul.second-level-menu,
.bottom ul.top-level-menu>li:hover>ul.second-level-menu {
display: table;
position: absolute;
left: 10%;
width: 70%;
padding: 10px 5%;
list-style-type: none;
background: #333;
z-index: 2;
}
.middle ul.top-level-menu li ul.second-level-menu li,
.bottom ul.top-level-menu li ul.second-level-menu li{
position: relative;
}
.middle ul.top-level-menu li ul.second-level-menu li ul.third-level-menu,
.bottom ul.top-level-menu li ul.second-level-menu li ul.third-level-menu {
display: none;
z-index: 1;
}
.middle ul.top-level-menu li ul.second-level-menu li:hover > ul.third-level-menu,
.bottom ul.top-level-menu li ul.second-level-menu li:hover > ul.third-level-menu {
display: block;
z-index: 1;
position: absolute;
left: 95%;
background: red;
text-align: left;
list-style: none;
padding: 10px 14px;
top: 0px;
}
<nav role="navigation">
<div class="middle">
<ul class="top-level-menu">
<li>
Acerca
<ul class="second-level-menu">
<li>Historia</li>
<li>Misión y Visión</li>
<li>Organigrama</li>
</ul>
</li>
<li>
Carreras
<ul class="second-level-menu">
<li>Enfermería</li>
<li>Informática</li>
<li>Gastronomía
<li>
<li>Contabilidad</li>
</ul>
</li>
<li>
Admisión
<ul class="second-level-menu">
<li>Chicago</li>
<li>Los Angeles</li>
<li>
New York
<ul class="third-level-menu">
<li>Information</li>
<li>Book a Meeting</li>
<li>Testimonials</li>
<li>Jobs</li>
</ul>
</li>
<li>Seattle</li>
</ul>
</li>
<li>Calendario</li>
</ul>
</div>
</nav>