HTML + CSS kodlarında Açılır (Dropdown) Menü yapmak istiyorum, yardım?

Merhabalar CSS konusunda biraz yardıma ihtiyacım var yardımcı olan arkadaşlara şimdiden çok teşekkürler;

Sorunum Aşağıda verdiğim HTML + CSS kodlarında Açılır (Dropdown) Menü yapmak istiyorum fakat baya uğraştım bunu başaramadım bu konuda yardımcı olursanız sevinirim;



HTML KOD:





CSS KOD:

/*** NAV BUTTONS ***/
#navigation {
text-indent: -9999px;
background: url("../images/nav.png") 50% 50% no-repeat;
height: 71px;
width: 1010px;
}
#navigation li#main a {
background: url("../images/buttons/main_a.png") 50% 50% no-repeat;
width: 122px;
height: 71px;
display: block;
float: left;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#navigation li#main a:hover {
opacity: 100;
filter: alpha(opacity=100);
}

#navigation .dropdown {
position: relative;
display: inline-block;
}

#navigation .dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}

#navigation .dropdown:hover .dropdown-content {
display: block;
}

#navigation li#forum a {
background: url("../images/buttons/forum_a.png") 50% 50% no-repeat;
width: 170px;
height: 71px;
display: block;
float: left;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#navigation li#forum a:hover {
opacity: 100;
filter: alpha(opacity=100);
}
#navigation li#files a {
background: url("../images/buttons/files_a.png") 50% 50% no-repeat;
width: 140px;
height: 71px;
display: block;
float: right;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#navigation li#files a:hover {
opacity: 100;
filter: alpha(opacity=100);
}
#navigation li#reg a {
background: url("../images/buttons/reg_a.png") 50% 50% no-repeat;
width: 156px;
height: 71px;
display: block;
float: right;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#navigation li#reg a:hover {
opacity: 100;
filter: alpha(opacity=100);
}


Yukarıda Gösterilen Kodlara Açılır Menü eklemek istiyorum CSS olarak yardımcı olursanız sevinirim.

AYRICA CANLI OLARAK GÖRMEK VE DÜZENLEMEK İÇİN:

http://codepen.io/GrafikPlaza/pen/RrEyjG

Ek Olarak: Yokmu yardım edecek ?

güncelleyelim ++++++