I am attempting to create a dropdown menu with multiple levels. However, when I hover over the first level, the second level appears slightly above and to the left of the first level. I want the second level to appear directly below the first level in the center. Additionally, I'm unsure how to position a third level menu to the right 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>
<a href="#!">About</a>
<ul class="second-level-menu">
<li><a href="https://en.wikipedia.org/wiki/History" target="_blank">History</a></li>
<li><a href="{{ route('missionvision') }}">Mission and Vision</a></li>
<li><a href="#">Organizational Chart</a></li>
</ul>
</li>
<li>
<a href="#!">Programs</a>
<ul class="second-level-menu">
<li><a href="#">Nursing</a></li>
<li><a href="#">Computer Science</a></li>
<li><a href="#">Culinary Arts</a>
<li>
<li><a href="#">Accounting</a></li>
</ul>
</li>
<li>
<a href="#!">Admissions</a>
<ul class="second-level-menu">
<li><a href="#">Chicago</a></li>
<li><a href="#">Los Angeles</a></li>
<li>
<a href="#">New York</a>
<ul class="third-level-menu">
<li><a href="#">Information</a></li>
<li><a href="#">Book a Meeting</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Jobs</a></li>
</ul>
</li>
<li><a href="#">Seattle</a></li>
</ul>
</li>
<li><a href="#!">Calendar</a></li>
</ul>
</div>
</nav>Below is an image showing the desired output: