UL Tagı
Hemen hemen tüm menülerde UL Tagı yer alır ve zaman zaman UL tagını (Menüyü) sayfanın ortasında göstermek zor olur.
Örnek
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>2 Aşamalı Menü</title>
<style>
</style>
</head>
<body>
<ul class="navbar">
<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="#">Vizyon ve Misyon</a></li>
<li><a href="#">Ekip</a></li>
</ul>
</li>
<li>
<a href="#">Hizmetler</a>
<ul>
<li><a href="#">Web Tasarım</a></li>
<li><a href="#">Yazılım Geliştirme</a></li>
<li><a href="#">SEO Optimizasyonu</a></li>
</ul>
</li>
<li><a href="#">İletişim</a></li>
</ul>
</body>
</html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>2 Aşamalı Menü</title>
<style>
/* Menü genel görünüm */
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
/* Üst menü */
.navbar {
background-color: #333;
display: flex;
}
/* Üst menü elemanları */
.navbar > li {
position: relative;
}
/* Link görünümü */
.navbar a {
display: block;
color: white;
padding: 12px 18px;
text-decoration: none;
}
/* Hover efekti */
.navbar a:hover {
background-color: #555;
}
/* Alt menü (gizli başta) */
.navbar li ul {
display: none;
position: absolute;
background-color: #444;
min-width: 160px;
}
/* Üst menü üzerine gelince alt menü açılsın */
.navbar li:hover ul {
display: block;
}
/* Alt menü hover */
.navbar li ul li a:hover {
background-color: #666;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
/* Üst menü */
.navbar {
background-color: #333;
display: flex;
}
/* Üst menü elemanları */
.navbar > li {
position: relative;
}
/* Link görünümü */
.navbar a {
display: block;
color: white;
padding: 12px 18px;
text-decoration: none;
}
/* Hover efekti */
.navbar a:hover {
background-color: #555;
}
/* Alt menü (gizli başta) */
.navbar li ul {
display: none;
position: absolute;
background-color: #444;
min-width: 160px;
}
/* Üst menü üzerine gelince alt menü açılsın */
.navbar li:hover ul {
display: block;
}
/* Alt menü hover */
.navbar li ul li a:hover {
background-color: #666;
}
</style>
</head>
<body>
<ul class="navbar">
<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="#">Vizyon ve Misyon</a></li>
<li><a href="#">Ekip</a></li>
</ul>
</li>
<li>
<a href="#">Hizmetler</a>
<ul>
<li><a href="#">Web Tasarım</a></li>
<li><a href="#">Yazılım Geliştirme</a></li>
<li><a href="#">SEO Optimizasyonu</a></li>
</ul>
</li>
<li><a href="#">İletişim</a></li>
</ul>
</body>
</html>
Örnek
<html>
<head>
<style type="text/css">
#headermenu {
text-align: center;
}
#headermenu ul {
list-style: none;
display: inline-block;
}
#headermenu ul li {
border:1px solid black;
float: left; /* or display: inline; */
}
</style>
</head>
<body>
<div id="headermenu">
<ul>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
</ul>
</div>
</body>
</html>
<head>
<style type="text/css">
#headermenu {
text-align: center;
}
#headermenu ul {
list-style: none;
display: inline-block;
}
#headermenu ul li {
border:1px solid black;
float: left; /* or display: inline; */
}
</style>
</head>
<body>
<div id="headermenu">
<ul>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
</ul>
</div>
</body>
</html>
