CSS ve HTML ile dikey açılır menü uygulaması şu adımlarla yapılabilir:
HTML kodunun oluşturulması:
<div class="menu">
<ul>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Hakkımızda</a>
<ul>
<li><a href="#">Tarihçe</a></li>
<li><a href="#">Misyon & Vizyon</a></li>
</ul>
</li>
<li><a href="#">Ürünler</a>
<ul>
<li><a href="#">Kategori 1</a></li>
<li><a href="#">Kategori 2</a></li>
</ul>
</li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
Bu kod, açılır menünün HTML yapısını oluşturur. Açılır menü içindeki her bir öğe, bir <li> etiketi içinde tanımlanır ve her bir alt menüyü tanımlamak için bir <ul> etiketi içinde <li> etiketleri kullanılır.
CSS kodunun oluşturulması:
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
.menu li {
float: left;
background-color: #000;
width: 100%;
}
.menu a {
display: block;
padding: 10px 15px;
color: #fff;
font-weight: bold;
text-decoration: none;
}
.menu ul ul {
display: none;
position: absolute;
top: 100%;
}
.menu ul ul ul {
top: 0;
left: 100%;
}
.menu li:hover > ul {
display: block;
}
Bu kod, açılır menünün görüntüsünü tanımlar. Menü öğeleri için bir liste oluşturulur ve her bir öğenin arka plan rengi siyah, yazı rengi beyaz ve yazı kalın olarak tanımlanır. Alt menülerin görünür olması için display: none; özelliği kullanılır ve ancak li:hover > ul seçicisi ile mouse ile üzerinde geldiğinde görünür hale getirilir.