Css ile basit bir menü tasarlayalım.Menü aşağıdaki gibidir.
Html dosyamız:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Style.css" rel="stylesheet" type="text/css" />
<link href="reset.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="menu">
<ul>
<li><a href="">deneme</a>
<ul>
<li><a href="">deneme</a></li>
<li><a href="">deneme</a></li>
<li><a href="">deneme</a></li>
<li><a href="">deneme</a></li>
</ul>
</li>
<li><a href="">deneme</a>
<ul>
<li><a href="">deneme</a></li>
<li><a href="">deneme</a></li>
<li><a href="">deneme</a></li>
<li><a href="">deneme</a></li>
</ul>
</li>
<li><a href="">deneme</a></li>
<li><a href="">deneme</a></li>
</ul>
<div style="clear: both"></div>
</div>
</body>
</html>Menu classına verdiğimiz stillerin float uyguladığımız taglarıda kapsaması için
<div style="clear: both"></div>satırını yazdık.
Css kodlarımız:
.menu
{
background: lightgray;
}
.menu ul li
{
padding: 10px;
float: left;
}
.menu ul li:hover
{
position: relative;
}
.menu ul li ul
{
background: lightgray;
display: none;
position: absolute;
left: 0;
margin-top: 10px; /* padding-top 10px (menu ul li) */
}
.menu ul li:hover ul
{
display: block;
clear: both;
}