Alt menü oluşturmak için genellikle ana menü öğelerinin altına, yatay veya dikey olarak yerleştirilen bir alt menü eklenir. İşte basit bir HTML ve CSS örneği:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Alt Menü Örneği</title>
<style>
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
display: flex;
}
nav {
background-color: #333;
color: #fff;
padding: 1em;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-right: 20px;
position: relative;
}
nav a {
text-decoration: none;
color: #fff;
font-size: 1.2em;
padding: 10px;
display: block;
}
nav a:hover {
background-color: #555;
}
.submenu {
position: absolute;
top: 100%;
left: 0;
background-color: #444;
display: none;
}
nav li:hover .submenu {
display: block;
}
.submenu a {
padding: 10px;
display: block;
color: #fff;
text-decoration: none;
}
.submenu a:hover {
background-color: #555;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#anasayfa">Ana Sayfa</a></li>
<li>
<a href="#hizmetler">Hizmetler</a>
<ul class="submenu">
<li><a href="#web">Web Tasarım</a></li>
<li><a href="#seo">SEO</a></li>
<li><a href="#grafik">Grafik Tasarım</a></li>
</ul>
</li>
<li><a href="#referanslar">Referanslar</a></li>
<li><a href="#iletisim">İletişim</a></li>
</ul>
</nav>
</body>
</html>
Bu örnekte:
.submenusınıfı, alt menüyü temsil eder veposition: absolute;ile ana menü öğesinin altına yerleştirilir.nav li:hover .submenuile bir ana menü öğesine mouse ile gelindiğinde alt menüyü görünür hale getiririz..submenu ave.submenu a:hoverile alt menü bağlantılarının stili belirlenir.
Bu temel yapıyı kullanarak kendi projenize uygun alt menüleri ekleyebilir ve stil özelliklerini özelleştirebilirsiniz.