Açılır Menü Yapımı - HTML5 - CSS3 - Ders7
HTML İÇERİĞİ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Menü Yapımı</title>
<link rel="stylesheet" href="style.css">
</head><center>
<ul>
<li><a>Anasayfa</a></li>
<li><a>Hakkımızda</a>
<ul>
<li><a>Biz Kimiz</a></li>
<li><a>Misyon</a></li>
<li><a>Vizyon</a></li>
</ul>
</li>
<li><a>Destek</a></li>
<li><a>Referanslar</a></li>
<li><a>İletişim</a>
<ul>
<li><a>Telefon</a></li>
<li><a>Web İletişim</a></li>
<li><a>Harita</a></li>
</ul>
</li>
</ul></center>
</html>
CSS İÇERİĞİ:
body{
background: url('images/1.jpeg') no-repeat;
background-size: cover;
font-family: Arial;
color: white;
}
ul{
margin: 0px;
padding: 0px;
list-style: none;
}
ul li{
float: left;
width: 200px;
height: 40px;
background-color: rgba(52,73,94,0.7);
line-height: 40px;
text-align: center;
font-size: 20px;
margin-right: 2px;
margin-top: 2px;
}
ul li a:hover{
background-color: white;
color: black;
cursor: pointer;
}
ul li ul li{
display: none;
}
ul li:hover ul li{
display: block;
}
Yorumlar
Yorum Gönder