CSS ile Yatay Açılır Menü Örneği (Web Tasarım ve Programlama)

CSS ile Yatay Açılır Menü Örneği (Web Tasarım ve Programlama)

 

 

 

 

 

<html >

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS yatay Açılır Menü Örneği</title>
<style type=”text/css”>
<!–
body ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
body ul li {
float: left;
height: 30px;
width: 160px;
position: relative;
background-color: #000;
}
body ul li a {
height: 30px;
display: block;
font-weight: bold;
color: #FFF;
text-decoration: none;
padding-left: 5px;
line-height: 30px;
}
body ul li a:hover {
height: 30px;
display: block;
font-weight: bold;
color: #000;
text-decoration: none;
padding-left: 5px;
line-height: 30px;
background-color: #CCC;
}
body ul li ul {
position: absolute;
left: 0px;
top: 30px;
display: none;
}
body ul li:hover ul {
display: block;

}
–>
</style>
</head>

<body>
<ul>
<li><a href=”anasayfa.html”>Anasayfa</a></li>
<li><a href=”hakkimizda.html”>Hakkımızda</a>
<ul>
<li><a href=”kalite.html”>Kalite Politikamız</a></li>
<li><a href=”insankaynaklari.html”>İnsan Kaynakları</a></li>
</ul>
</li>
<li><a href=”#”>Hizmetlerimiz</a>
<ul>
<li><a href=”tasarim.html”>Tasarım</a></li>
<li><a href=”grafik.html”>Grafik</a></li>
<li><a href=”reklamcilik.html”>Reklamcılık</a></li>
</ul>
</li>
<li><a href=”referans.html”>Referanslarımız</a></li>

<li><a href=”iletisim.html”>İletisim</a></li>
</ul>
</body>
</html>

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir