yatay açılır menü(açılan alt menüde yatay olacak)

[Yasron93]

selamlar öncelikle
arkadaşlar proje ödevim olarak monster bilgisayarın sitesini yapıyorum ancak orda bulunan açılır menüyü bi türlü yapamadım internettede araştırdım hiçbi bilgi yok
açılır menüyü yapmak basit ama açılan menüyü nasıl yatay yapabileceğimi bulamadım bi fikri bilgisi olan biri cevap atabilir mi ? şimdiden teşşekür ederim.

 

[Yasron93]

++

 

[我喜欢人]

merhaba ,

css nin display özelliğini kullandığınız yerde (dikey açtırırken yazıyorduk ya) "block" değeri yerine "inline" yazdığınız zaman ,dikey yerine yatay olarak açılacaktır.

Mesaj otomatik birleştirildi: 28 Aralık 2019

ÖRNEK:

HTML

<link href="dosya.css" rel="stylesheet" type="text/css">
<div class="dropdown">
<button class="dropbtn">hakkımızda</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>


CSS (DİKEY AÇILIR)
.dropdown-content {
display: none;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
display: inline-block;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}


HTML YUKARIDAKİ GIBI OLSUN
AYNI CSS DOSYASI ŞU ŞEKİLDE DÜZENLENDİĞİNDE
.dropdown-content {
display: none;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
display: inline-block;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: inline;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: inline;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}


CSS dosyasını bu şekilde düzenlediğinizde (çok küçük değişiklikler)

YATAY AÇILMIŞ OLUR...