CSS Business Solutions Template Navigation Help

I have been tweaking the code for this template for the last two days and can't figure out how to get a dropdown menu on this template. I can't tell if something else is preventing it.

Here's my code: HTML:
<div id="navigation">
<ul>
<li class="first selected"><a href="">Home</a></li>
<li><a href="">Our School</a></li>
<ul>
<li><a href="">History</a></li>
<li><a href="">Mission</a></li>
<li><a href="">Curriculum</a></li>
<li><a href="">Board of Directors</a></li>
<ul>
<li><a href="">Members</a></li>
<li><a href="">CMS Structure</a></li>
<li><a href="">Executive Summary</a></li>
</ul>
</ul>
<li><a href="services.html">Admissions</a></li>
<ul>
<li><a href="">How To Apply</a></li>
<li><a href="">Tution and Fees</a></li>
<li><a href="">Open House</a></li>
<li><a href="">Placement Testing</a></li>
<li><a href="">Directions</a></li>
</ul>
<li><a href="solutions.html">Academics</a></li>
<ul>
<li><a href="">Arabic Language Studies</a></li>
<li><a href="">Mathematics</a></li>
<li><a href="">English Language Arts</a></li>
<li><a href="">Islamic Studies & Qur'an</a></li>
<li><a href="">Social Studies & History</a></li>
<li><a href="">Science & the Study of our World</a></li>
<li><a href="">Technology</a></li>
<li><a href="">School & Extracurricular Activites</a></li>
<ul>
<li>CMS SWIM</li>
<li>Robotics</li>
</ul>
</ul>
</ul>
</div>

CSS:
#navigation {
background: url(../images/bg-menu-left-curve.gif) no-repeat left bottom;
height: 47px;
padding: 0 0 0 4px;
position: absolute;
bottom: -20px;
left: 0;
}

#navigation ul {
background: url(../images/bg-menu.gif) repeat-x;
display: inline-block;
height: 40px;
width: 974px;
list-style: none;
margin: 0;
padding: 4px 0 3px;
float: left;
}

#navigation li {
float: left;
font-size: 16px;
line-height: 40px;
margin: 0 0;
text-align: left;
position: relative;
display: inline-block;
}

#navigation ul li {
position: relative;
}

#navigation ul ul {
visibility: hidden;
position: absolute;
left: 0;
top: 40px;
width: auto;
}

#navigation ul:hover > ul{
visibility: visible;
float: left;
position: absolute;
display: block;
}

#navigation li a {
color: #092f44;
font-weight: bold;
padding: 0 10px;
text-decoration: none;
}
#navigation a:hover {
color: #0a2d43;
}
Right now when I hover over the nav bar ALL the submenus appear at the same time on top of each other. This template did not have a drop down menu in it's code, so I may have messed that up somewhere along the way, but I'm not sure where or how. Any help would be greatly appreciated.

 

Hi Rebbeka,

I helped someone with a similar problem recently. Please take a look at the thread in case it helps:
https://freewebsitetemplates.com/fo...r-and-highlighting-menu-tab.21252/#post-85079

If you are still stuck after this please post again and I'll try to help you.