13 Aug 2012

Css ile basit bir menü tasarlayalım.Menü aşağıdaki gibidir.

menu

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;
}
Aşkın Gedik
Ruby on Rails Developer

Ben Aşkın, Protel Teknoloji Çözümlerinde yazılım geliştirme takım lideri olarak çalışıyorum.

Benimle ilgili daha fazla bilgiyi hakkımda sayfasına göz atarak veya Twitter, Facebook, Github ve Gplus üzerinden takip ederek öğrenebilirsiniz.