Third-level nested navigation overlap issue - css

Question

Please help! Everything in my menu works as I want except this one issue. My third level nested list items are overlaying on the second level and I can't fix it. I have tried everything I can think of, but I am beating my head against a brick wall here.
If someone could please take a look at this code example and help figure out what I am doing wrong it would be greatly appreciated.
I really don't want to have to start from scratch as I like the look and feel of the menu.
Here is my code:
/*navigation*/
nav.primary {
width: 960px;
height: 30px;
font-family: "Source Sans Pro", sans-serif;
font-weight: 400;
position: absolute;
top: 123px;
left: 50%;
margin-left: -34.25em;
border-bottom: #F26621 solid 3px;
z-index: 9999;
}
nav.primary ul, nav.primary ul li { margin: 0px; }
nav.primary select { display: none; }
nav.primary ul li {
display: block;
float: left;
position: relative;
}
nav.primary ul li a {
display: block;
line-height: 28px;
padding: 0 25px;
color: #444;
text-decoration: none;
font-size: 16px;
font-weight: 500;
background: none;
letter-spacing: 0.06em;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
}
nav.primary ul li a:hover {
background: #F26621;
color: #FFF;
cursor: pointer;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
}
/*sub menu*/
nav.primary ul li ul {
position: absolute;
top: 100%;
left: 0px;
z-index: 998;
opacity: 0.6;
max-height: 0px;
overflow: hidden;
width: auto;
min-width: 188px;
transition: max-height .25s ease-in-out .125s;
-moz-transition: max-height .25s ease-in-out .125s;
-webkit-transition: max-height .25s ease-in-out .125s;
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
nav.primary ul li span { display: none; }
nav.primary ul li:hover ul {
z-index: 999;
height: auto;
max-height: 200px;
opacity: 1;
transition-delay: 0s;
-moz-transition-delay: 0s;
-webkit-transition-delay: 0s;
}
nav.primary ul ul li {
display: block;
float: left;
width: auto;
min-width: 188px;
display: block;
background: #F26621;
border-bottom: 1px solid #999;
}
nav.primary ul ul li a {
display: block;
line-height: 32px;
padding: 0 14px;
font-size: 14px;
letter-spacing: 0.03em;
text-transform: none;
color: #FFF;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
transition: background .25s ease 0s;
-moz-transition: background .25s ease 0s;
-webkit-transition: background .25s ease 0s;
}
nav.primary ul ul li a:hover {
background: #F98C58;
border: none;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
transition: background .25s ease 0s;
-moz-transition: background .25s ease 0s;
-webkit-transition: background .25s ease 0s;
}
nav.primary ul li:hover > a {
background: #F26621;
color: #FFF;
}
/*third level menu*/
nav.primary ul ul li ul {
position: absolute;
top: 100%;
left: 0px;
z-index: 998;
opacity: 0.6;
max-height: 0px;
overflow: visible;
width: auto;
min-width: 188px;
transition: max-height .25s ease-in-out .125s;
-moz-transition: max-height .25s ease-in-out .125s;
-webkit-transition: max-height .25s ease-in-out .125s;
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
nav.primary ul ul ul li {
float: none;
width: auto;
display: block;
background: #999;
border-bottom: 1px solid #F26621;
}
nav.primary ul ul ul li a {
display: block;
width: auto;
min-width: 188px;
line-height: 32px;
background: #999;
padding: 0 14px 0 28px;
font-size: 12px;
letter-spacing: 0.03em;
text-transform: none;
color: #FFF;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
transition: background .25s ease 0s;
-moz-transition: background .25s ease 0s;
-webkit-transition: background .25s ease 0s;
}
nav.primary ul ul ul li a:hover {
background: #F98C58;
border: none;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
transition: background .25s ease 0s;
-moz-transition: background .25s ease 0s;
-webkit-transition: background .25s ease 0s;
}
<nav role="navigation" class="primary clearfix">
<ul>
<li class="selected">
Home
</li>
<li>
About Us
<ul>
<li>
Management Team
</li>
<li>
Board of Directors
</li>
<li>
History
</li>
<li>
Collaborations
</li>
<li>
Business Development
</li>
<li>
Contact Us
</li>
</ul>
</li>
<li>
R & D
<ul>
<li>
Pipeline
<ul>
<li>
Ampion
</li>
<li>
Optina
</li>
<li>
NCE001
</li>
</ul>
</li>
<li>
Disease Education
</li>
<li>
Non-core Assets
</li>
</ul>
</li>
<li>
Newsroom
<ul>
<li>
Media
</li>
</ul>
</li>
<li>
Investor Relations
<ul>
<li>
Sec Filings
</li>
<li>
Corporate Governance
</li>
<li>
Stock Information
</li>
<li>
Events & Presentations
</li>
<li>
Investor FAQ
</li>
<li>
Email Alerts
</li>
</ul>
</li>
<li>
Sitemap
</li>
</ul>
<select id="pageParentID" name="pageParentID" class="nav">
<option value="" selected="selected">Go to...</option>
<option value="/zone/">Home</option>
<option value="/zone/about-us.php">About Us</option>
<option value="/zone/management-team.php"> - Management Team</option>
<option value="/zone/board-of-directors.php"> - Board of Directors</option>
<option value="/zone/history.php"> - History</option>
<option value="/zone/collaborations.php"> - Collaborations</option>
<option value="/zone/business-development.php"> - Business Development</option>
<option value="/zone/contact-us.php"> - Contact Us</option>
<option value="/zone/r-d.php">R & D</option>
<option value="/zone/pipeline.php"> - Pipeline</option>
<option value="/zone/ampion.php"> - Ampion</option>
<option value="/zone/optina.php"> - Optina</option>
<option value="/zone/nce001.php"> - NCE001</option>
<option value="/zone/disease-education.php"> - Disease Education</option>
<option value="/zone/non-core-assets.php"> - Non-core Assets</option>
<option value="/zone/newsroom/">Newsroom</option>
<option value="/zone/media.php"> - Media</option>
<option value="/zone/investor-relations.php">Investor Relations</option>
<option value="/zone/sec-filings.php"> - Sec Filings</option>
<option value="/zone/corporate-governance.php"> - Corporate Governance</option>
<option value="/zone/stock-information.php"> - Stock Information</option>
<option value="/zone/events-presentations.php"> - Events & Presentations</option>
<option value="/zone/investor-faq.php"> - Investor FAQ</option>
<option value="/zone/email-alerts.php"> - Email Alerts</option>
<option value="/zone/sitemap.php">Sitemap</option>
</select>
</nav>

Answer 1

I've got it most of the way there. The main issue you had was that you needed to set
display: none;
to the 3rd level nav.
The working changes are in this fiddle