CSS ile dikey menü yapımı

1-Aşağıdaki kodu html dosyanızın head tag'ına yada .css dosyanıza yapıştırın.

body
{
margin:0px;
}

#menu ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 160px;
background-color:#3465a4;

}
#menu ul li a
{
display:block;
margin:2px 2px 2px 2px;
padding:0 0 0 5px;
text-decoration:none;
font-family:Verdana;
font-size:12px;
color:#f68e56;
font-weight:600;
vertical-align:middle;
line-height:200%;
}
#menu ul li a:hover
{
background-color:#204a87;
border-left:solid 3px black;

}

2-Burada oluşturacğımız div'in adı(id'si) menu olarak tanımlandı.Şimdi menü elemanlarımızı içinde tutacak menu id'li div'i oluşturup içine linklerimizi koyalım.
<div id="menu">

<ul>

<li>

<a href="http://xmlci.blogspot.com/2008/01/css-ile-dikey-men-yapm.html">Dikey CSS Menü</a>

<a href="http://xmlci.blogspot.com/2008/01/css-ile-dikey-men-yapm.html">Dikey CSS Menü</a>

<a href="http://xmlci.blogspot.com/2008/01/css-ile-dikey-men-yapm.html">Dikey CSS Menü</a>

<a href="http://xmlci.blogspot.com/2008/01/css-ile-dikey-men-yapm.html">Dikey CSS Menü</a>

<a href="http://xmlci.blogspot.com/2008/01/css-ile-dikey-men-yapm.html">Dikey CSS Menü</a>

<a href="http://xmlci.blogspot.com/2008/01/css-ile-dikey-men-yapm.html">Dikey CSS Menü</a>

<a href="http://xmlci.blogspot.com/2008/01/css-ile-dikey-men-yapm.html">Dikey CSS Menü</a>

<a href="http://xmlci.blogspot.com/2008/01/css-ile-dikey-men-yapm.html">Dikey CSS Menü</a>

</li>

</ul>

</div>


3-Menümüz Aşağıdaki gibi oluşmuş olmalı..

Hiç yorum yok:

Yorum Gönder

Popüler Yayınlar