BENİM DÜNYAM - CSS YATAY MENÜLER 2

YATAY MENÜLER İCEBLUE TASARIMLARDA GELİŞMİŞ AYARLARDAN TASARIM ÜSTÜ KUTUCUĞUNA VEYA BAŞKA YERE EKLEYEBİLİRSİNİZ.LİNKLERİ KENDİNİZE GÖRE UYARLAYIN
MENÜ 1

/* Blue Menu */

#blue {margin: 100px 0 0 0; background:#46A2D7; color: #fff}
#blue #orta{margin:0 auto; width: 768px; }
#blue #orta .menu{padding: 15px 0}
#blue #orta ul{list-style: none}
#blue #orta ul li{display: inline}
#blue #orta ul li a{padding: 2px 0 2px 7px; text-decoration: none; color: #164967; outline: none}
#blue #orta ul li a strong{padding: 2px 7px 2px 0}
#blue #orta ul li a:hover{color: #010507;background: #B5DAEF url(blue/a-bg-left-hover.gif) no-repeat;}
#blue #orta ul li a:hover strong{background: url(blue/a-bg-right-hover.gif) top right no-repeat}
#blue #orta ul li.this a{background: #fff url(blue/a-bg-left.gif) top left no-repeat; color: #1C5B82}
#blue #orta ul li.this a strong{background: url(blue/a-bg-right.gif) right top no-repeat}
#blue #orta ul li a:active{background: #7EBEE3 url(blue/a-bg-left-active.gif) top left no-repeat; color: #0E2F43}
#blue #orta ul li a:active strong{background: url(blue/a-bg-right-active.gif) top right no-repeat}
</style>

<body>
<div id="blue"><div id="orta"><div class="menu">
<ul>
<li class="this"><a href="#"><strong>Home</strong></a></li>
<li><a href="#"><strong>Blog</strong></a></li>
<li><a href="#"><strong>Project</strong></a></li>
<li><a href="#"><strong>Downloads</strong></a></li>
<li><a href="#"><strong>About</strong></a></li>
</ul>
</div></div></div>

MENÜ 2

#gray{margin: 30px 0 0 0; background:#7E7E7E; color: #fff}
#gray #orta{margin:0 auto; width: 768px; }
#gray #orta .menu{padding: 15px 0}
#gray #orta ul{list-style: none}
#gray #orta ul li{display: inline}
#gray #orta ul li a{padding: 2px 0 2px 7px; text-decoration: none; color: #333; outline: none}
#gray #orta ul li a strong{padding: 2px 7px 2px 0}
#gray #orta ul li.this a{background: #fff url(gray/a-bg-left-gray.gif) top left no-repeat; color: #333}
#gray #orta ul li.this a strong{background: url(gray/a-bg-right-gray.gif) right top no-repeat}
#gray #orta ul li a:hover{color: #000 ;background: #CBCBCB url(gray/a-bg-left-hover-gray.gif) no-repeat;}
#gray #orta ul li a:hover strong{background: url(gray/a-bg-right-hover-gray.gif) top right no-repeat}
#gray #orta ul li a:active{background: #A5A5A5 url(gray/a-bg-left-active-gray.gif) top left no-repeat; color: #0E2F43}
#gray #orta ul li a:active strong{background: url(gray/a-bg-right-active-gray.gif) top right no-repeat}</style><div id="gray"><div id="orta"><div class="menu">
<ul>
<li><a href="#"><strong>Home</strong></a></li>
<li class="this"><a href="#"><strong>Blog</strong></a></li>
<li><a href="#"><strong>Project</strong></a></li>
<li><a href="#"><strong>Downloads</strong></a></li>
<li><a href="#"><strong>About</strong></a></li>
</ul>
</div></div></div>

MENÜ 3

#green{margin: 30px 0 0 0; background:#B4BE8B; color: #fff}
#green #orta{margin:0 auto; width: 768px; }
#green #orta .menu{padding: 15px 0}
#green #orta ul{list-style: none}
#green #orta ul li{display: inline}
#green #orta ul li a{padding: 2px 0 2px 7px; text-decoration: none; color: #393F23; outline: none}
#green #orta ul li a strong{padding: 2px 7px 2px 0}
#green #orta ul li.this a{background: #fff url(green/a-bg-left-green.gif) top left no-repeat; color: #333}
#green #orta ul li.this a strong{background: url(green/a-bg-right-green.gif) right top no-repeat}
#green #orta ul li a:hover{color: #1E2112 ;background: #E1E5D1 url(green/a-bg-left-hover-green.gif) no-repeat;}
#green #orta ul li a:hover strong{background: url(green/a-bg-right-hover-green.gif) top right no-repeat}
#green #orta ul li a:active{background: #CBD2AE url(green/a-bg-left-active-green.gif) top left no-repeat; color: #0E2F43}
#green #orta ul li a:active strong{background: url(green/a-bg-right-active-green.gif) top right no-repeat}
</style>
<div id="green"><div id="orta"><div class="menu">
<ul>
<li><a href="#"><strong>Home</strong></a></li>
<li><a href="#"><strong>Blog</strong></a></li>
<li class="this"><a href="#"><strong>Project</strong></a></li>
<li><a href="#"><strong>Downloads</strong></a></li>
<li><a href="#"><strong>About</strong></a></li>
</ul>
</div></div></div>

MENÜ 4

/*Credits: CSSpplay */
/*URL: http://www.cssplay.co.uk/menus/pro_15 */
.pro15 {padding:0 0 0 20px; margin:0; list-style:none; height:30px; background:#1841c8 url(pro_15_0.gif);}
.pro15 li {float:left;}
.pro15 li a {display:block; float:left; height:30px; line-height:30px; background:url(pro_15_0.gif); color:#ddd; text-decoration:none; font-family:arial, verdana, sans-serif; text-align:center; padding:0 0 0 10px; cursor:pointer; font-size:11px;}
.pro15 li a b {float:left; display:block; background:url(pro_15_0.gif) right top; padding:0 16px 0 8px;}
.pro15 li.current a {color:#fff; background:url(pro_15_2.gif);}
.pro15 li.current a b {background:url(pro_15_2.gif) no-repeat right top;}
.pro15 li a:hover {color:#fff; background: url(pro_15_1.gif);}
.pro15 li a:hover b {background:url(pro_15_1.gif) no-repeat right top;}
.pro15 li.current a:hover {color:#fff; background: url(pro_15_2.gif); cursor:default;}
.pro15 li.current a:hover b {background:url(pro_15_2.gif) no-repeat right top;}
.pro15 li a em {display:block; float:left; width:16px; height:30px;}
.pro15 li a em.home {background:url(home2.gif) no-repeat center center;}
.pro15 li a em.calendar {background:url(events.gif) no-repeat center center;}
.pro15 li a em.camera {background:url(camera.gif) no-repeat center center;}
.pro15 li a em.find {background:url(find.gif) no-repeat center center;}
.pro15 li a em.contact {background:url(contact.gif) no-repeat center center;}
.pro15 li a em.search {background:url(search.gif) no-repeat center center;}
.pro15 li a em.search {background:url(search.gif) no-repeat center center;}
.pro15 li a em.search {background:url(search.gif) no-repeat center center;}
.pro15 li a em.search {background:url(search.gif) no-repeat center center;}

</style><body>

<ul class="pro15">
<li><a href="http://isocom.tr.gg/ANA-SAYFA.htm"><em class="ANA SAYFA"></em><b>ANA SAYFA</b></a></li>
<li><a href="LİNK KODU"><em class="calendar"></em><b>LİNK İSMİ</b></a></li>
<li><a href="LİNK KODU"><em class="camera"></em><b>LİNK İSMİ</b></a></li>
<li><a href="LİNK KODU"><em class="find"></em><b>LİNK İSMİ</b></a></li>
<li class="current"><a href="LİNK KODU"><em class="contact"></em><b>LİNK İSMİ</b></a></li>

</ul>

</body>

MENÜ 5

Home
Privacy Policy
Products
Contact us
Search
Search

/*Credits: CSSpplay */
/*URL: http://www.cssplay.co.uk/menus/pro_three */

.menu3 {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#00ccff url(three_0.gif); position:relative; border:1px solid #99ffcc; border-width:0 1px; border-bottom:1px solid #0000ff;}
.menu3 li {float:left;}
.menu3 li a {display:block; float:left; height:35px; line-height:35px; color:#99ffcc; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}
.menu3 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu3 li.current a {color:#00ccff; background:url(three_2.gif);}
.menu3 li.current a b {background:url(three_2.gif) no-repeat right top;}
.menu3 li a:hover {color:#00ccff; background:#99ffcc url(three_1.gif);}
.menu3 li a:hover b {background:url(three_1.gif) no-repeat right top;}
.menu3 li.current a:hover {color:#00ccff; background:#99ffcc url(three_2.gif); cursor:default;}
.menu3 li.current a:hover b {background:url(three_2.gif) no-repeat right top;}

</style>
</head>

<body>

<ul class="menu3">
<li><a href="#nogo"><b>Home</b></a></li>
<li><a href="#nogo"><b>Privacy Policy</b></a></li>
<li><a href="#nogo"><b>Products</b></a></li>
<li><a href="#nogo"><b>Search</b></a></li>
<li><a href="#nogo"><b>Contact us</b></a></li>
<li><a href="#nogo"><b>Search</b></a></li>
</ul>

SİTE İSMİ

<style>

A            { font-family:arial; color=black; text-decoration:none; font-size=10pt;}

A:Hover { text-decoration: underline; text-weigth:bold; }

A.haber {text-decoration:underline; color:#0064d0; }

A.haber:Hover {text-decoration: underline; color:navy; text-weigth:bold; }

A.faslik       {text-decoration:underline; color:navy; text-weight:bold; font-family:tahoma; }

A.faslik:Hover {text-decoration: underline; color:blue; text-weigth:bold; }

A.fmenu       {text-decoration:none; color:gray; text-weight:bold; font-family:verdana; }

A.fmenu:Hover {text-decoration: underline; color:orane; text-weigth:bold; }

A.menum       {text-decoration:none;

font-family:arial; font-size:10pt; width:100%;

padding:4 4 4 4; background-color:#8080ff;

color:ffffff; font-weight:bold; }

A.menum:Hover {background-color:ffffff; text-decoration:none; width:100%; color:#8080ff; padding:4 4 4 4; }

A.beyaz { text-decoration:none; color:white; }

A.beyaz:Hover { text-decoration: underline; color:#8080ff; text-weigth:bold; }

A.haberd { font-family:verdana; text-decoration:none; text-weigth:bold; color:black; }

A.haberd:Hover { text-decoration:none; background-color <img src="//theme.webme.com/smiles/shocked.gif" border="0" width="15" height="15" alt="" />range; text-weigth:bold; color:white; }

A.bara       { font-family:arial; text-decoration:underline; text-weigth:bold; color:navy; }

A.bara:Hover { text-decoration:underline; text-weigth:bold; color:blue; }

A.kara       { font-family:impact; text-decoration:underline; color:black; }

A.kara:Hover { text-decoration:underline; color:red}

,p,div,span,th,td,dl,dd,dt,ol,ul,blockquote{font-family:verdana; font-size:10pt;}

.pkisa            {font-family:arial; font-size:10pt; text-align:justify; text-indent :10px;}

</style>

</table>

Güzel css üst menü kendinize göre uyarlayın.

KODU

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.ubercolortabs{
padding: 0;
width: 100%;
overflow: hidden;
background: transparent;
}

.ubercolortabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin: 0;
padding: 0;
list-style: none;
}

.ubercolortabs li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform: uppercase;
}

.ubercolortabs a{
float: left;
color: white;
background: #804000 url(media/roundleft.gif) no-repeat left top; /*default background color of tabs, left corner image*/
margin: 0 2px 0 0;
padding: 0 0 1px 3px;
text-decoration: none;
letter-spacing: 1px;
}

.ubercolortabs a span{
float: left;
display: block;
background: transparent url(media/roundright.gif) no-repeat right top; /*right corner image*/
padding: 7px 9px 3px 6px;
cursor: pointer;
}

.ubercolortabs a span{
float: none;
}

.ubercolortabs a:hover, .ubercolortabs li.selected a{
background-color: #AE5300; /*background color of tabs onMouseover*/
color: white;
}

.ubercolortabs a:hover span{
background-color: transparent;
}

.ubercolordivider{ /*CSS for horizontal line.*/
clear: both;
padding: 0;
width: 100%;
height: 5px;
line-height: 5px;
background: #804000; /*background color of horizontal line*/
border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}

</style>
<div class="ubercolortabs">
<ul>
<li><a href="http://www.dynamicdrive.com" style="margin-left: 12px"><span>Home</span></a></li>
<li><a href="http://www.dynamicdrive.com/new.htm"><span>New</span></a></li>
<li class="selected"><a href="http://www.dynamicdrive.com/revised.htm"><span>Revised</span></a></li>
<li><a href="http://tools.dynamicdrive.com"><span>Tools</span></a></li>	
<li><a href="http://www.dynamicdrive.com/forums/"><span>Forums</span></a></li>	
</ul>
</div>

GEREKLİ LİNKLER 1

ÇANKIRI LİNKLERİ

GEREKLİ LİNKLER 2