Blogger Dikey Menü Navigasyonlu (25Adet)

 

 

Blogunuzda kenar çubuğuna ekliyebileceğiniz birbirinden şık görünüm olarak hoş ve üstelik navigasyonlu olan tam 25 adet navigasyonlu dikey menü içerisinden istediğinizi blogunuza uygulayabilmek için; Beğendiğiniz dikey menüye ait CSS kodunu HTML kodları içerisinde ]]></b:skin> kodunu bulup menüye ait CSS kodunu ]]></b:skin>kodundan önceki kısma yapıştırın.

Daha Sonra CSS kodunu eklediğiniz dikey menüye ait HTML kodunu ise Kumanda Paneli>Yerleşim>Gadget Ekle>Html/Javascript yolunu takip ederek CSS kodunu eklediğimiz menüye ait HTML kodunu da açılan gadget içerisine yapıştırın ve kaydedip çıkın.Gadgeti menünün görünmesini istediğiniz yere sürükleyip bırakın.

HTML kodları içerisinde

<li><a href="#1" >Link 1</a></li>
<li><a href="#2" >Link 2</a></li>
<li><a href="#3" >Link 3</a></li>
<li><a href="#4" >Link 4</a></li>
<li><a href="#5" >Link5</a></li>

#1-#2-#3-#4-#5: yerine yazılarımızın linkini koyuyoruz
Link1-Link2-Link3-Link4-Link5:yerinede menüde görünmesini istediğimiz isimleri yazıyoruz.
Örnek:

<li><a href="http://phtmldrive.blogspot.com/" >PHtmlDrive</a></li>

Navigasyonlu Dikey Menü #1

 

CSS Kodu:

#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRD3VOxMOHispfabIkD7HZKGO1Z-AMkkoM6ZknxPOIEu2Klf3tXjEyYNWxI8BpBdRN_UKNF9qJyyOSgG2LrYpMAGFe4_jgl5pj_UuW__Wghzi-aB4MXrscfKL9Q0NEFduFPHu6HI_rutk/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRD3VOxMOHispfabIkD7HZKGO1Z-AMkkoM6ZknxPOIEu2Klf3tXjEyYNWxI8BpBdRN_UKNF9qJyyOSgG2LrYpMAGFe4_jgl5pj_UuW__Wghzi-aB4MXrscfKL9Q0NEFduFPHu6HI_rutk/s800/menu6.gif) 0 -32px; padding: 8px 0 0 20px; }

HTML Kodu:

<div id="menu6"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigasyonlu Dikey Menü #2

CSS Kodu:


#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; border: 1px solid #ccc; margin: 10px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #888; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGaBseqM9SlCtTD6CK2T1lWdm4yh8zofv530zjAFOht_aAZpN13PlXZI8nozs6aizwaiM4QIXc6z2fSscFlQqJaBzC-8cwXwBoaMlY8z99fAeyGJcW2pvVQkd-ThmyGezLOosjyGac5IU/s800/menu3.gif); padding: 8px 0 0 30px; } #menu3 li a:hover, #menu3 li #current, #menu3 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGaBseqM9SlCtTD6CK2T1lWdm4yh8zofv530zjAFOht_aAZpN13PlXZI8nozs6aizwaiM4QIXc6z2fSscFlQqJaBzC-8cwXwBoaMlY8z99fAeyGJcW2pvVQkd-ThmyGezLOosjyGac5IU/s800/menu3.gif) 0 -32px; padding: 8px 0 0 30px; }
HTML Kodu:


<div id="menu3"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigasyonlu Dikey Menü #3

CSS Kodu:


#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxMwppVaGe-xtwwUCEARdhinPPdtGPWld572ygfF-T3MErAtX-aFFQp7_q64QfEoEGYPmtO6XJTXz6TBTb0y6du6GGY2dRK8M8TDrsZpzw74HxF0_X5DJ_8T-fwsv0hvpYL5tHDyZkjaA/s800/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxMwppVaGe-xtwwUCEARdhinPPdtGPWld572ygfF-T3MErAtX-aFFQp7_q64QfEoEGYPmtO6XJTXz6TBTb0y6du6GGY2dRK8M8TDrsZpzw74HxF0_X5DJ_8T-fwsv0hvpYL5tHDyZkjaA/s800/menu9.gif) 0 -32px; padding: 8px 0 0 35px; }
HTML Kodu:


<div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigasyonlu Dikey Menü #4

CSS Kodu:


#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPK-jmY2mkjbegHn0B1l-1hFsYwK-RO3osKQElH83thgS07dXAy0dF4T1gg6kX7a5o44VFhgqcyQ5Q5Q_0c8OudQ4I_8RJKyFBP4D-2Xo26zs4TMdnuF0ST0upJGodXqBRs9ccNwxvIXY/s800/menu6.gif); padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li #current, #menu6 li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPK-jmY2mkjbegHn0B1l-1hFsYwK-RO3osKQElH83thgS07dXAy0dF4T1gg6kX7a5o44VFhgqcyQ5Q5Q_0c8OudQ4I_8RJKyFBP4D-2Xo26zs4TMdnuF0ST0upJGodXqBRs9ccNwxvIXY/s800/menu6.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Kodu:


<div id="menu6"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigasyonlu Dikey Menü #5

CSS Kodu:


#menu14 ul { list-style: none; margin: 0; padding: 0; } #menu14 img { border: none; } #menu14 { width: 200px; margin: 10px; } #menu14 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu14 li a:link, #menu14 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSpdb0nfCpA9cT2pmIDwhtZeU2E9exHYGZyB0nfx8KPeEt_SY-VSv5t0ET4FVjyUKGWsvN9a38LKEpC9j5hDhS4JarvePqfLiFM8qYqcujN1KZs5_qxDgdfcdEIYCuVYv2w8KHgBb9zvo/s800/menu14.gif) 0 -32px; padding: 8px 0 0 10px; } #menu14 li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSpdb0nfCpA9cT2pmIDwhtZeU2E9exHYGZyB0nfx8KPeEt_SY-VSv5t0ET4FVjyUKGWsvN9a38LKEpC9j5hDhS4JarvePqfLiFM8qYqcujN1KZs5_qxDgdfcdEIYCuVYv2w8KHgBb9zvo/s800/menu14.gif); padding: 8px 0 0 10px; }
HTML Kodu:


<div id="menu14"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigasyonlu Dikey Menü #6

CSS Kodu:


#menu7 ul { list-style: none; margin: 0; padding: 0; } #menu7 img { border: none; } #menu7 { width: 200px; margin: 10px; } #menu7 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu7 li a:link, #menu7 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9vvKdscqq8iEqq7Brnhpxg0MCBW2PRmMJp1HdasRijruC6rJiPlfOSgjljztmv2dIWLqTqTi8WvuPfpwPo6Q1oqClDThTkxyqE8Zh_7nglBus8XTC5NIzG-RSd1jBcjgGuSimK730XHA/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9vvKdscqq8iEqq7Brnhpxg0MCBW2PRmMJp1HdasRijruC6rJiPlfOSgjljztmv2dIWLqTqTi8WvuPfpwPo6Q1oqClDThTkxyqE8Zh_7nglBus8XTC5NIzG-RSd1jBcjgGuSimK730XHA/s800/menu7.gif) 0 -32px; padding: 8px 0 0 30px; }
HTML Kodu:


<div id="menu7"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigasyonlu Dikey Menü #7

CSS Kodu:


#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; border-style: solid solid none solid; border-color: #677D92; border-size: 1px; border-width: 1px; margin: 10px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTh6w1EV6LhaT-77Jf6jMVefjdODrWRGI9HDQZARpYkTWERlD6dOX2MOSgMJN4t-xgCDOX5MwV0Xk8ZL-LTe-m8FJQ3xW8wRhLHBpkHi4gs3MbVQ-je0BwsD763D4nsgeXXV-ENYQWAvc/s800/menu2.gif); padding: 8px 0 0 10px; } #menu2 li a:hover, #menu2 li #current { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTh6w1EV6LhaT-77Jf6jMVefjdODrWRGI9HDQZARpYkTWERlD6dOX2MOSgMJN4t-xgCDOX5MwV0Xk8ZL-LTe-m8FJQ3xW8wRhLHBpkHi4gs3MbVQ-je0BwsD763D4nsgeXXV-ENYQWAvc/s800/menu2.gif) 0 -32px; padding: 8px 0 0 10px; } #menu2 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTh6w1EV6LhaT-77Jf6jMVefjdODrWRGI9HDQZARpYkTWERlD6dOX2MOSgMJN4t-xgCDOX5MwV0Xk8ZL-LTe-m8FJQ3xW8wRhLHBpkHi4gs3MbVQ-je0BwsD763D4nsgeXXV-ENYQWAvc/s800/menu2.gif) 0 -64px; padding: 8px 0 0 10px; }
HTML Kodu:


<div id="menu2"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigasyonlu Dikey Menü #8

CSS Kodu:


#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin-top: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #E5E8D4; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggvQPUgVP87Oosj2aGU2OWOVcP6bmLC37CPfLWkKmtnn8T8tT89rDiUIixsXXCPKrTnVDgY7uiLpebtakiUfL2wyntw2VFr7rFAB3UtW3YzGH8l-SR-Q4vkM2gNH0WREwiaf6QU2-FFPw/s800/menu9.gif); padding: 8px 0 0 10px; } #menu9 li a:hover, #menu9 li #current { color: #725033; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggvQPUgVP87Oosj2aGU2OWOVcP6bmLC37CPfLWkKmtnn8T8tT89rDiUIixsXXCPKrTnVDgY7uiLpebtakiUfL2wyntw2VFr7rFAB3UtW3YzGH8l-SR-Q4vkM2gNH0WREwiaf6QU2-FFPw/s800/menu9.gif) 0 -32px; padding: 8px 0 0 10px; } #menu9 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggvQPUgVP87Oosj2aGU2OWOVcP6bmLC37CPfLWkKmtnn8T8tT89rDiUIixsXXCPKrTnVDgY7uiLpebtakiUfL2wyntw2VFr7rFAB3UtW3YzGH8l-SR-Q4vkM2gNH0WREwiaf6QU2-FFPw/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; }
HTML Kodu:


<div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigasyonlu Dikey Menü #9

CSS Kodu:


#menu12 ul { list-style: none; margin: 0; padding: 0; } #menu12 img { border: none; } #menu12 { width: 200px; margin: 10px; } #menu12 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 22px; text-decoration: none; } #menu12 li a:link, #menu12 li a:visited { color: #666; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUH_01gKz-wGtCYIa69SQBmu3NH0WA4Re71Sr_wY_iohD1MMv5xQDGa_3K0eYkfMZ37QzAuY-LHL-2KP8BeX44d_D2bRLe9FJXZ_8lBOKqGeYhntZKOmGDoyLvYHanFQiyCoaERe8Pv0k/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUH_01gKz-wGtCYIa69SQBmu3NH0WA4Re71Sr_wY_iohD1MMv5xQDGa_3K0eYkfMZ37QzAuY-LHL-2KP8BeX44d_D2bRLe9FJXZ_8lBOKqGeYhntZKOmGDoyLvYHanFQiyCoaERe8Pv0k/s800/menu12.gif) 0 -32px; padding: 10px 0 0 35px; }
HTML Kodu:


<div id="menu12"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigasyonlu Dikey Menü #10

CSS Kodu:


#menu13 ul { list-style: none; margin: 0; padding: 0; } #menu13 img { border: none; } #menu13 { width: 200px; margin: 10px; } #menu13 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu13 li a:link, #menu13 li a:visited { color: #C7377D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji5X-djpqMjGEoak33d7JgrQTNNUpC2zj5IZUQ5nQsQpouIWV6OPVk-jaF6WPkkAbxQbH2tFbRqfKI_QQr5vEcV_SBptl9q2XNEXlFCX8Gj9ZE01WgeRDXn-LhLtkSPlSC6UZ0job3KVM/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji5X-djpqMjGEoak33d7JgrQTNNUpC2zj5IZUQ5nQsQpouIWV6OPVk-jaF6WPkkAbxQbH2tFbRqfKI_QQr5vEcV_SBptl9q2XNEXlFCX8Gj9ZE01WgeRDXn-LhLtkSPlSC6UZ0job3KVM/s800/menu13.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Kodu:


<div id="menu13"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigasyonlu Dikey Menü #11

CSS Kodu:


#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-size: 1px; border-width: 1px; margin: 10px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #9E3C02; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlCK6WXQJ-S2cx_pKd0HnArhK1E8cgl3zlviA8p8lhy5WdHDp96YYwzks6b0tkxWd6qqClwA5lAkZmPdTp35t4yrRYIC3jrQFPPp-2pavsuvgyxya7dzT98reT2PYeDez82ylGbTMLETU/s800/menu4.gif); padding: 8px 0 0 30px; } #menu4 li a:hover, #menu4 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlCK6WXQJ-S2cx_pKd0HnArhK1E8cgl3zlviA8p8lhy5WdHDp96YYwzks6b0tkxWd6qqClwA5lAkZmPdTp35t4yrRYIC3jrQFPPp-2pavsuvgyxya7dzT98reT2PYeDez82ylGbTMLETU/s800/menu4.gif) 0 -32px; padding: 8px 0 0 30px; } #menu4 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlCK6WXQJ-S2cx_pKd0HnArhK1E8cgl3zlviA8p8lhy5WdHDp96YYwzks6b0tkxWd6qqClwA5lAkZmPdTp35t4yrRYIC3jrQFPPp-2pavsuvgyxya7dzT98reT2PYeDez82ylGbTMLETU/s800/menu4.gif) 0 -64px; padding: 8px 0 0 30px; }
HTML Kodu:


<div id="menu4"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigasyonlu Dikey Menü #12

CSS Kodu:


#navlist { color: white; background: #17a; border-bottom: 0.2em solid #17a; border-right: 0.2em solid #17a; padding: 0 1px; margin-left: 0; width: 12em; font: normal 10px Verdana, sans-serif; } #navlist li { list-style: none; margin: 0; font-size: 1em; } #navlist a { display: block; text-decoration: none; margin-bottom: 0.5em; margin-top: 0.5em; color: white; background: #39c; border-width: 1px; border-style: solid; border-color: #5bd #035 #068 #6cf; border-left: 1em solid #fc0; padding: 0.25em 0.5em 0.4em 0.75em; } #navlist a#current { border-color: #5bd #035 #068 #f30; } #navlist a { width: 99%; /* only necessary for Internet Explorer */ } #navlist a { voice-family: "\"}\""; voice-family: inherit; width: 9.6em; /* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */ } #navcontainer>#navlist a { width: auto; /* only necessary if you use the hacks above for the Internet Explorer */ } #navlist a:hover, #navlist a#current:hover { background: #28b; border-color: #069 #6cf #5bd #fc0; padding: 0.4em 0.35em 0.25em 0.9em; } #navlist a:active, #navlist a#current:active { background: #17a; border-color: #069 #6cf #5bd white; padding: 0.4em 0.35em 0.25em 0.9em; }
HTML Kodu:


<div id="navcontainer"> <ul id="navlist"> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigasyonlu Dikey Menü #13

CSS Kodu:


#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin-top: 10px; } #menu8 li a { text-decoration: none; height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; } #menu8 li a:link, #menu8 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPlxYiDI6wxPabSkXffTQ4ad3pa2a07LuS_OTFikVyC5nxBgBt_FQ-kud8pzc6AcT-iNq0mk3Is_feR2mxFMkqFfzC9h9XvBh8nC4ljgqt29iXR7IFpB2flY8zVQKt7RH9b7M7EtG424c/s800/menu8.gif); padding: 8px 0 0 20px; } #menu8 li a:hover, #menu8 li #current { color: #257EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPlxYiDI6wxPabSkXffTQ4ad3pa2a07LuS_OTFikVyC5nxBgBt_FQ-kud8pzc6AcT-iNq0mk3Is_feR2mxFMkqFfzC9h9XvBh8nC4ljgqt29iXR7IFpB2flY8zVQKt7RH9b7M7EtG424c/s800/menu8.gif) 0 -32px; padding: 8px 0 0 25px; } #menu8 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPlxYiDI6wxPabSkXffTQ4ad3pa2a07LuS_OTFikVyC5nxBgBt_FQ-kud8pzc6AcT-iNq0mk3Is_feR2mxFMkqFfzC9h9XvBh8nC4ljgqt29iXR7IFpB2flY8zVQKt7RH9b7M7EtG424c/s800/menu8.gif) 0 -64px; padding: 8px 0 0 25px; }
HTML Kodu:


<div id="menu8"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigasyonlu Dikey Menü #14

CSS Kodu:


#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin: 10px; border-style: solid; border-color: #656556; border-size: 1px; border-width: 1px; } #menu8 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu8 li a:link, #menu8 li a:visited { color: #656556 ; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9vVV0R9hMRIFYHTCW7WobuaC5IIH23foT0kKFfyyNa5qD75_Pj_C8F4tBFrgVif3tEYDsZdJBCTUltp-RjsplFVCJurmIb2ltYvvUIrQPymy21sjZNHdlsGLiGVVC8e58ImHiMT0xQQw/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9vVV0R9hMRIFYHTCW7WobuaC5IIH23foT0kKFfyyNa5qD75_Pj_C8F4tBFrgVif3tEYDsZdJBCTUltp-RjsplFVCJurmIb2ltYvvUIrQPymy21sjZNHdlsGLiGVVC8e58ImHiMT0xQQw/s800/menu8.gif) 0 -32px; padding: 8px 0 0 20px; }
HTML Kodu:


<div id="menu8"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigasyonlu Dikey Menü #15

CSS Kodu:


#menu9 body { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; } #menu1 ul { list-style: none; margin: 0; padding: 0; } #menu1 img { border: none; } #menu1 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #3D261D; border-size: 1px; border-width: 1px; } #menu1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #E4D6CD; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwRuDBh5An6PKG_P36lyQ9NIy7luQNKTg8sPG71ihFI5y7HjYGn89iwFol7pAdprYMWj4EyZYyUyUzk4zf0tdvq8wFMLeCDs2E_hSBjiD87hrUxlN5Lj2FGhl59sRU3m3tvIOSaAlaESI/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwRuDBh5An6PKG_P36lyQ9NIy7luQNKTg8sPG71ihFI5y7HjYGn89iwFol7pAdprYMWj4EyZYyUyUzk4zf0tdvq8wFMLeCDs2E_hSBjiD87hrUxlN5Lj2FGhl59sRU3m3tvIOSaAlaESI/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Kodu:


<div id="menu1"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigasyonlu Dikey Menü #16

CSS Kodu:


#navcontainer { background: #f0e7d7; width: 30%; margin: 0 auto; padding: 1em 0; font-family: georgia, serif; font-size: 13px; text-align: center; text-transform: lowercase; } ul#navlist { text-align: left; list-style: none; padding: 0; margin: 0 auto; width: 70%; } ul#navlist li { display: block; margin: 0; padding: 0; } ul#navlist li a { display: block; width: 100%; padding: 0.5em 0 0.5em 2em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; }
HTML Kodu:


<div id="navcontainer"> <ul id="navlist"> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigasyonlu Dikey Menü #17

CSS Kodu:


#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #BCD2E6; border-size: 1px; border-width: 1px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #8BADCF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPow-SmvSp0sE-Z-HxtlktfhyubjjZ9J5jCOEtHOBHSU-RVL_qgRJ-IRU1ESZ9rMEUMszDsVDU2bvRwU3qWp-1B6IR22pRde9WyXxXh-Y_9CW714NGtqi6sP7QAoCR6RYFP6t2FAxKnmk/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPow-SmvSp0sE-Z-HxtlktfhyubjjZ9J5jCOEtHOBHSU-RVL_qgRJ-IRU1ESZ9rMEUMszDsVDU2bvRwU3qWp-1B6IR22pRde9WyXxXh-Y_9CW714NGtqi6sP7QAoCR6RYFP6t2FAxKnmk/s800/menu3.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Kodu:


<div id="menu3"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigasyonlu Dikey Menü #18

CSS Kodu:


#menu11 ul { list-style: none; margin: 0; padding: 0; } #menu11 img { border: none; } #menu11 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #889944; border-size: 1px; border-width: 1px; } #menu11 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu11 li a:link, #menu11 li a:visited { color: #889944; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMBYjYfPVN76AFJpc23-_XkQcgHPKtnHheqASv8WaI9P7KILwoHXjI_y13MbKP8LuFVxGgt1j_Duj94EjjLFv6HGwZUIHq3SRVXBbLh5JZgjM69hZgfM8hQMZ7s9y8e3srkRxryE5gTGY/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMBYjYfPVN76AFJpc23-_XkQcgHPKtnHheqASv8WaI9P7KILwoHXjI_y13MbKP8LuFVxGgt1j_Duj94EjjLFv6HGwZUIHq3SRVXBbLh5JZgjM69hZgfM8hQMZ7s9y8e3srkRxryE5gTGY/s400/menu11.gif) 0 -32px; padding: 8px 0 0 27px; }
HTML Kodu:


<div id="menu11"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigasyonlu Dikey Menü #19

CSS Kodu:


#button { width: 12em; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: Tahoma, Arial, sans-serif; /*'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;*/ font-size : 10px; background-color: #90bade; color: #333; } #button ul { list-style: none; margin: 0; padding: 0; border: none; } #button li { border-bottom: 1px solid #90bade; margin: 0; list-style: none; list-style-image: none; } #button li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; } html>body #button li a { width: auto; } #button li a:hover { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; } #button li #active { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }
HTML Kodu:


<div id="button"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigasyonlu Dikey Menü #20

CSS Kodu:


#menu ul { list-style: none; margin: 0; padding: 0; } #menu img { border: none; } #menu { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; margin: 10px; } #menu li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu li a:link, #menu li a:visited { color: #5E7830; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU7eHwlUzS_-3Nu5LFIxYZ9BewyiepvF54Lmr95JkMKHgAmleHOjh1o_2w2MmEk5GQFBE_-L1VaYqzapAeLruQHjAgyBRD0OMxqgpiBGxRxWK76phgMUNz8k3KgQjKSx2QavoKZtJsQUU/s800/menu1.gif); padding: 8px 0 0 10px; } #menu li a:hover, #menu li #current { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU7eHwlUzS_-3Nu5LFIxYZ9BewyiepvF54Lmr95JkMKHgAmleHOjh1o_2w2MmEk5GQFBE_-L1VaYqzapAeLruQHjAgyBRD0OMxqgpiBGxRxWK76phgMUNz8k3KgQjKSx2QavoKZtJsQUU/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; } #menu li a:active { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU7eHwlUzS_-3Nu5LFIxYZ9BewyiepvF54Lmr95JkMKHgAmleHOjh1o_2w2MmEk5GQFBE_-L1VaYqzapAeLruQHjAgyBRD0OMxqgpiBGxRxWK76phgMUNz8k3KgQjKSx2QavoKZtJsQUU/s800/menu1.gif) 0 -64px; padding: 8px 0 0 10px; }
HTML Kodu:


<div id="menu"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigasyonlu Dikey Menü #21

CSS Kodu:


#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #D8D5D1; border-size: 1px; border-width: 1px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #3688BA; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAxVR9mEE8tXPW5H5VXDaXuo3abKRaCKa3ZOq9QTn6-5r6HOKewAdE08Swh8LjDYBUPIM5cNaVMUgQt-egAU_Y9L1F-2eoIAqcY0Xkl9niVy7dYriMKq1Pqc5mQ424g6a1sJBVsfaXCOE/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAxVR9mEE8tXPW5H5VXDaXuo3abKRaCKa3ZOq9QTn6-5r6HOKewAdE08Swh8LjDYBUPIM5cNaVMUgQt-egAU_Y9L1F-2eoIAqcY0Xkl9niVy7dYriMKq1Pqc5mQ424g6a1sJBVsfaXCOE/s800/menu2.gif) 0 -32px; padding: 8px 0 0 32px; }
HTML Kodu:


<div id="menu2"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigasyonlu Dikey Menü #22

CSS Kodu:


#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; border-style: none solid none solid; border-color: #D0D0D0; border-width: 1px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDLMRWrlcnHvPm1hFPJ_bAhLj7ngHWcxwH69KTY_RTDsF3zQLMSvSbcAsrivzY7XMH6fOR2NzDdNV-69sCMm02XLtWcQ_pY7G-mXaemDHoZjci5W5kYjbLG14vWRKIu7SaLqfAJRAqrlM/s800/menu5.gif); padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:hover, #menu5 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDLMRWrlcnHvPm1hFPJ_bAhLj7ngHWcxwH69KTY_RTDsF3zQLMSvSbcAsrivzY7XMH6fOR2NzDdNV-69sCMm02XLtWcQ_pY7G-mXaemDHoZjci5W5kYjbLG14vWRKIu7SaLqfAJRAqrlM/s800/menu5.gif) 0 -32px; padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDLMRWrlcnHvPm1hFPJ_bAhLj7ngHWcxwH69KTY_RTDsF3zQLMSvSbcAsrivzY7XMH6fOR2NzDdNV-69sCMm02XLtWcQ_pY7G-mXaemDHoZjci5W5kYjbLG14vWRKIu7SaLqfAJRAqrlM/s800/menu5.gif) 0 -64px; padding: 8px 25px 0 10px; text-align: right; }
HTML Kodu:


<div id="menu5"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigasyonlu Dikey Menü #23

CSS Kodu:


#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ7t8l4pYKf2kaG_KvGl8k5UHsp8nWCHNYBoExhOHKMJHBoC4TsK81EQeCZs-Kn_ZL17vEuTuPvigxCm10_INjaawJM1_rkEZVNiLHe0pBoO1mpzArvOibQIU91uFbCb5pjxYdHmCGsEY/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ7t8l4pYKf2kaG_KvGl8k5UHsp8nWCHNYBoExhOHKMJHBoC4TsK81EQeCZs-Kn_ZL17vEuTuPvigxCm10_INjaawJM1_rkEZVNiLHe0pBoO1mpzArvOibQIU91uFbCb5pjxYdHmCGsEY/s800/menu5.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Kodu:


<div id="menu5"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigasyonlu Dikey Menü #24 

CSS Kodu:


#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #CCC; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzoHusx7AanynL2QjFoYWNviZ79sGiFJAt6xQl60WeAN-k4lVc7WA5BCFNHrTpcORn6BKBthfLhNw9qGLcW8hWPM4XhidFhf9KTnn-MJB4yiGG5foXsFC_ZWCeScC8X3LNa6RwdZvhIEA/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzoHusx7AanynL2QjFoYWNviZ79sGiFJAt6xQl60WeAN-k4lVc7WA5BCFNHrTpcORn6BKBthfLhNw9qGLcW8hWPM4XhidFhf9KTnn-MJB4yiGG5foXsFC_ZWCeScC8X3LNa6RwdZvhIEA/s800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Kodu:


<div id="menu4"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigasyonlu Dikey Menü #25

CSS Kodu:


#menu10 ul { list-style: none; margin: 0; padding: 0; } #menu10 img { border: none; } #menu10 { width: 200px; margin: 10px; } #menu10 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu10 li a:link, #menu10 li a:visited { color: #4D4D4D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiexZPgpILdGwYDQAF6jL2Wi4IFP2NWjyFTKYpUscNYCdVwqsQ3E_unmwVeQ-p7DV_7gOknQO1awlbvsnUx5mP7_EwRhF_hi9RfWBGgLPoBhWzuVEqk2TqocnD5gvTY97R2Avcn-T5zwMA/s800/menu10.gif); padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiexZPgpILdGwYDQAF6jL2Wi4IFP2NWjyFTKYpUscNYCdVwqsQ3E_unmwVeQ-p7DV_7gOknQO1awlbvsnUx5mP7_EwRhF_hi9RfWBGgLPoBhWzuVEqk2TqocnD5gvTY97R2Avcn-T5zwMA/s800/menu10.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Kodu:


<div id="menu10"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>