- Katılım
- Ara 27, 2022
- Mesajlar
- 212
- Etkileşim
- 3,891
- Puan
- 0
- Yaş
- 35
- Konum
- Adana
- Web sitesi
- forumdas.com.tr
- F-D Coin
- 3,886
HTML sayfalarımızda CSS komutlarından yararlanarak dikey açılır menü oluşturma anlatılmıştır.
Kod:
<html>
<head>
<style type="text/css">
ul,ol
{
list-style:none;
}
ol,ul,li
{
margin:0; padding:0;
}
.menu
{
width:200px;
}
.menu a
{
color:orange;
text-decoration:none;
display:block;
line-height:25px;
font-weight:bolder;
padding-left:10px;
}
.menu a:hover
{
color:grey;
background:orange;
}
.menu li
{
position:relative;
background:grey;
}
.menu ul
{
display:none;
position:absolute;
left:200px;
top:0px;
width:200px;
}
.menu li:hover > ul
{
display:block;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Ürünler</a>
<ul>
<li><a href="#">Kulübeler</a></li>
<li><a href="#">Mamalar</a>
<ul>
<li><a href="#">Köpek Maması</a></li>
<li><a href="#">Kedi Maması</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Referanslar</a></li>
<li><a href="#">Albüm</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</body>
</html>