Menu widoczne po najechaniu pod menu głównym

To jest mój pierwszy post, a zatem witam wszystkich.

Mój problem polega na tym iż chciałem by na stronie, której menu główne ma taki układ:

po najechaniu na link PROJECTS pojawiało się menu zawierające odnośniki do kolejnych projektów dokładnie pod menu głównym w taki mniej więcej sposób:

Tylko że aby uzyskać dokładnie taki efekt musiałem wklepać następujący kod
HTML:

			<ol>
				<li><a href="index.html#textcontainer" class="link">Bio</a></li>				
				<li><a href="blog.html#textcontainer"  class="link">Blog</a></li>
				<li>
					<a href="#"  class="link">Projects</a>

					<ul>
						<li><a href="projekt1.html" class="link" >Projekt 1</li>
						<li><a href="projekt2.html" class="link">Projekt 2</li>
						<li><a href="projekt3.html" class="link">Projekt 3</li>
					</ul>
				</li>
				<li><a href="projekt2.html"  class="link">Projekt 2</a></li>
				<li><a href="projekt3.html"  class="link">Projekt 3</a></li> 
				<li><a href="contact.html#textcontainer"  class="link">Contact</a></li>
				</ol>

CSS:

ol
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	height: 35px;
	line-height: 200%;
	display: inline-block;
}

ol > li
{
	float: left;
	padding: 0 20px;
}

ol > li > ul
{
	position: absolute;
	padding: 0;
	margin: 0 -140px;
	list-style-type: none;
	display: none;
}

ol >li > ul > li
{
	float: left;
	position: relative;
	padding: 20px 80px 0 0;
	margin: 0;
}

ol > li:hover > ul
{
	display: block
}

Jak widzicie w ul musiałem ustawić ujemny margines, co samo w sobie nie wydaje mi się szczególnie profesjonalne. Jeżeli jednak ustawiam margin: 0 wówczas odnośnik Projekt 1 ustawia się dokładine pod odnośnikiem PROJECTS co wygląda koszmarnie (i przez wzgląd na dobro waszego odczucia estetyki nie będe wstawiał screena :) ). Co więcej, żeby w ogóle uzyskać ul w postaci blokowej pod ol musiałem nadać mu position: absolute, w pzypadku gdy robiłem relative całe menu głowne na prawo od PROJECTS odsuwało się w prawą stronę o tyle ile zajmowało menu z ul.

Zastanawiam się więc czy da się do zrobić lepiej używając samego css (bez js) oraz czy dało by się tę sprawę załatwić tak, ażeby nie trzeba było zmieniać ustawień paddingu i marginesów za każdym razem gdy do rozwijanego menu będę chciał dodać kolejny odnośnik.

Będę wdzięczny za uwagi i sugestie :)

/* Nawigacja - górne menu | dwa poziomy 
<nav id="top_nav">
    <ul id="first_level">
        <li>
            <a href="#link"></a>
            <ul class="second_level">
                <li><a href="#link2"></a></li>
                <li><a href="#link3"></a></li>
            </ul>
        </li>
        <...>
    <ul>
</nav>
*/

/* selektor potomka
   element jest potomkiem nie ważne jakiego ma rodzica
*/
#top_nav {
    /*font-family: 'sansationbold';*/
    font-family: 'ubuntumedium';
    text-transform: uppercase;
    font-size: 1em;
    width: 100%;
    position: fixed;
    z-index: 99;
    background-color: rgba(0, 102, 102, 0.7);
    border-bottom: 2px solid white;
}
#top_nav #first_level, .second_level {
    list-style: none
}
/* selektor dziecka
   element jest potomkiem WAŻNE jakiego ma rodzica
*/
#top_nav > #first_level > li {
    float: left;
    margin: 0;
    position: relative;
    color: white;
    padding: 1%;
    transition-duration: 0.4s;
}
#top_nav > #first_level > li:hover {
    float: left;
    margin: 0;
    position: relative;
    background-color: rgba(0, 130, 130, 0.8);
    padding: 1%;
}
#top_nav > #first_level > li > a {
    text-decoration: none;
    color: white;
}
#top_nav > #first_level > li > .second_level {
    padding: 0;
    position: absolute; 
    display: none; 
    left: 0px; 
    top: 100%;
    width: 200px;
    text-align: left;
    background-color: #fcfcfc;
    outline: 1px solid rgba(0, 102, 102, 0.4);
    padding: 1%;
    font-family: 'ubuntumedium';
    font-size: 0.75em;
}
#top_nav > #first_level > li:hover > .second_level {
    display: block;
}
#top_nav > #first_level > li > .second_level > li {
     margin: 0; 
     padding: 0;
     position: relative; 
     float: none; 
     height: auto;
}
#top_nav > #first_level > li > .second_level > li > a {
     padding: 10px 30px; 
     color: #505050; 
     text-decoration: none;
     display: block;
     transition-duration: 0.2s;
}
#top_nav > #first_level > li > .second_level > li > a:hover {
    text-decoration: none;
    color: #505050;
    background-color: rgba(0, 102, 102, 0.1);
    outline: 1px solid rgba(0, 102, 102, 0.4);
}

Inspiracja, tak zrobiłem u siebie :)