CSS konusunda Acil yardım

Kodunuzun bu şekilde anlaşılması oldukça zor.  Yapmanız gereken kodunuzu jsbin.com gibi bir sitede çalışır ve müdahele edilir bir hale getirmeniz.  Ben bunu sizin için denedim:

https://jsbin.com/yodine/edit?html,css,js,output

Firefox'da şu şekilde bir sonuç çıkıyor:

Internet Explorer'da böyle gösteriliyor:

(Not: Diğer tarayıcılar noktaları hiç göstermiyor.)

Yapmanız gereken, yukardaki gibi, üzerinde çalışılabilir bir örneği paylaşmak.  Sonrasında açılır menülere bakılabilir.

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

Buyrun Tam olmasada mantık olarak anlayabilirsiniz.

Çalışmayan nedir? 

Çalıştırmak için neyi denediniz?

Var olan menüye açılır (dropdown) Menü eklemek istiyorum üzerine gelince

Burada hazır örnek var:

http://codepen.io/philhoyt/pen/ujHzd

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:

<div id="bg_nav_logo">
<ul id="navigation">
<li id="main"><a href="#">Main</a></li>
<li id="forum"><a href="#">Forum</a></li>
<li id="reg"><a href="#">Register</a></li>
<li id="files"><a href="#">Files</a></li>
</ul>
<div id="logo"><a href="#"></a></div>
</div>

 

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

Selamun Aleyküm,

buradan faydalanabilirsiniz.

http://cssmenumaker.com/