Ana Sayfa HTML5 ve CSS3
HTML5 CSS3 Sfırıdan İleri Seviye Videolu Eğitim Seti
Toplam 10 saat 25 dakika

Sadece CSS Kullanarak Yatay Açılır Menü

Sadece css kullanılarak açılır menü yapımı için internette epey kaynak var aslında. Ben videolu olarak olayın mantığını anlamanız açısından biraz daha basit bir anlatım yaptım. Öncelikle yatay açılır menü yapımını anlatacağım. Bir sonraki yazımda ise dikey açılır menü yapımından bahsedeceğim. Zaten mantık olarak aynı sadece ufak tefek css farklılıkları olacak.

:hover Verildiği css elemanına mouse ile üzerine gelindiği anı yakalamak için kullanılır. En basit tanımıyla div elemanımızın üzerine mouse ile geldiğimizde görsel değişiklik yapmamızı sağlar. Biz bu yazıda açılır menü yapmak için kullanacağız.

ul li:hover ul Bu yazıda böyle bir kullanım olacak. ul elemanının içindeki li elemanına mouse ile gelindiğinde, bir alttaki ul elemanını yakala ve uygula anlamına gelir.

Html kısmında kullandığım kodlar

<html lang="tr">
<head>
    <title>LOREM IPSUM</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="LOREM IPSUM">
    <meta name="author" content="SitePoint">
    <meta name="keywords" content="LOREM IPSUM">
    <link type="text/css" rel="stylesheet" href="styles2.css">
</head>
<body>

    <div class="menu">
        <ul>
            <li><a href="" title="">Home</a></li>
            <li><a href="" title="">Links</a>
                <ul>
                    <li><a href="" title="">Link 1</a></li>
                    <li><a href="" title="">Link 2</a></li>
                    <li><a href="" title="">Link 3</a></li>
                </ul>
            </li>
            <li><a href="" title="">About Us</a></li>
            <li><a href="" title="">Contact</a></li>
        </ul>
    </div>
    
</body>
</html>

CSS kısmında kullandığım kodlar

* {
	margin:0;
	padding:0
}
body {
	margin:0;
	padding:0
}

.menu {
	width:500px;
	margin:0 auto;
	margin-top:10px;
	background:#777
}
.menu ul {
	display:block;
	margin:0;
	text-align:center;
	padding:0
}
.menu ul li {
	list-style:none;
	display:inline-block
}
.menu ul li a {
	display:block;
	background:#777;
	color:#fff;
	font-size:12px;
	padding:20px 20px;
	text-decoration:none;
	font-family: Arial
}
.menu ul li a:hover {
	background:#666
}
.menu ul li ul {
	display:none;
	position:absolute;
	background:#666;
	width:200px
}
.menu ul li ul li {
	display:block
}
.menu ul li:hover > a {
	background:#666
}
.menu ul li ul li a {
	background:#666;
	text-align:left
}
.menu ul li ul li a:hover {
	background:#555
}
.menu ul li:hover ul {
	display:block
}

Demoİndir