Merhaba arkadaşlar bu gün sizinle Css ile açılır menünün diğerini göstereceğim. İlk dersimizde yatay açılır bir menü yapmıştık.Şimdi dikey açılır bir menü yapacağız ilk dersimizde kullandığımız materyalleri burada da kullanacağım.
Zaten ilk adımları biliyorsunuz.Hep aynı şeyler dikey açılır bir menü olması için aslında tek fark display kodunu blok yapmak.Ayrıca float özelliğini kaldırmalısınız. Kod üzerinde gösterirsek;
Zaten ilk adımları biliyorsunuz.Hep aynı şeyler dikey açılır bir menü olması için aslında tek fark display kodunu blok yapmak.Ayrıca float özelliğini kaldırmalısınız. Kod üzerinde gösterirsek;
ÇALIŞMANIN KODLARI
<html>
<head>
<title>Açılır Menü Yapımı</title>
<style type="text/css">
.menu ul
{
list-style-type:none;
}
.menu ul li a
{
background-color:purple;
display:block;
color:white;
text-decoration:none;
font-weight:bold;
font-family:New Times Roman;
padding:3px;
}
.menu ul li a:hover
{
background-color:green;
color:yellow;
}
</style>
</head>
<body>
<ul class="menu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Ürünler</a>
<ul>
<li><a href="#">Dizüstü</a></li>
<li><a href="#">Masaüstü</a></li>
<li><a href="#">Telefon</a></li>
<li><a href="#">Tablet</a></li>
</ul>
</li>
<li><a href="#">Parçalar</a></li>
<li><a href="#">Bize Ulaşın</a></li>
</ul>
</div>
</body>
</html>
Yorumlar
Yorum Gönder