placard

Css gri tasarım

Tasarımın üstü:
KOD:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery Animated Menu 3</title> <style type="text/css"> body { background-color:#333333; margin:0; } /* Firefox Dotted Outline Fix */ a:active { outline: none; } /* Firefox Dotted Outline Fix */ /* Menu Body */ ul#menu { width:80%; height:102px; background:url(http://img98.imageshack.us/img98/2571/17045756.png) repeat-x; list-style:none; margin:0; padding:0; padding-top:20px; padding-left:20%; } /* Float LI Elements - horizontal display */ ul#menu li { float:left; } /* Link - common attributes */ ul#menu li a { background:url(http://img812.imageshack.us/img812/2043/kodbankssprite.png) no-repeat scroll top left; display:block; height:81px; position:relative; } /* Specify width and background position attributes specifically for the class: "home" */ ul#menu li a.home { width:159px; } /* Specify width and background position attributes specifically for the class: "portfolio" */ ul#menu li a.portfolio { width:157px; background-position:-159px 0px; } /* Span (on hover) - common attributes */ ul#menu li a span { background:url(http://img812.imageshack.us/img812/2043/kodbankssprite.png) no-repeat scroll bottom left; display:block; position:absolute; top:0; left:0; height:100%; width:100%; z-index:100; } /* Span (on hover) - display pointer */ ul#menu li a span:hover { cursor:pointer; } /* Shift background position on hover for the class: "home" */ ul#menu li a.home span { background-position:0px -81px; } /* Shift background position on hover for the class: "portfolio" */ ul#menu li a.portfolio span { background-position:-159px -81px; } </style>  <script src="http://yourjavascript.com/5261101314/jquery-1.js" type="text/javascript"></script>  <script type="text/javascript"> $(function() { // set opacity to nill on page load $("ul#menu span").css("opacity","0"); // on mouse over $("ul#menu span").hover(function () { // animate opacity to full $(this).stop().animate({ opacity: 1 }, 'slow'); }, // on mouse out function () { // animate opacity to nill $(this).stop().animate({ opacity: 0 }, 'slow'); }); }); </script> </head> <body> <ul id="menu"> <li><a href="http://berilsyn.tr.gg" class="home"><span></span></a></li> <li><a href="http://kodbanks.tr.gg" class="portfolio"><span></span></a></li> </ul> </body> </html> <table width="980" height="208" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="208" align="left" valign="top" background="http://img217.imageshack.us/img217/7387/metalcsskodbanks01.gif"><table width="980" height="114" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="43" height="21"> </td> <td width="328"> </td> <td width="72"> </td> <td width="506"> </td> <td width="31"> </td> </tr> <tr> <td height="85"> </td> <td align="center" valign="middle"><div style="text-align: center"> <a href="ADRES" title="Site kurarken yardımcı adres"><img alt="Site kurarken yardımcı adres"border="0" src="http://img684.imageshack.us/img684/626/1butonkodbanks.png" /></div> </td> <td> </td> <td align="center" valign="middle"><div style="text-align: center"><a href="/iletisim.htm"><img border="0" width="466" height="61" alt="" src="http://www.turkiyeforum.com/reklam.gif" /></a></div> </td> <td> </td> </tr> </table> <table width="980" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="13" height="15"> </td> <td width="952"> </td> <td width="50"> </td> </tr> <tr> <td height="39"> </td> <td align="center" valign="middle"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>Generated by Pure CSS Menu.com : Free CSS Drop Down Menu Generator</title> <meta name="description" content="Online CSS Menu Maker. Create No-Javascript, 100% CSS Dropdown Menu in seconds! Horizontal css menu & Vertical css menu." /> </head> <body bgcolor="#ffffff">  <style> #pcm{display:none;} ul.pureCssMenu ul{display:none} ul.pureCssMenu li:hover>ul{display:block} ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;} ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;} ul.pureCssMenu,ul.pureCssMenu ul { margin:0px; list-style:none; padding:0px 2px 2px 0px; background-color:#fff; background-repeat:repeat; border-color:#808080; border-width:1px; border-style:solid; } ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu { display:block; zoom:1; height:21px; float: left; } ul.pureCssMenu ul{ width:134.4px; } ul.pureCssMenu li{ display:block; margin:2px 0px 0px 2px; font-size:0px; } ul.pureCssMenu a:active, ul.pureCssMenu a:focus { outline-style:none; } ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover { display:block; vertical-align:middle; background-color:#FFFFFF; border-width:1px; border-color:#fff; border-style:solid; text-align:center; text-decoration:none; padding:2px 5px 5px 10px; _padding-left:0; font:normal 11px Tahoma; color: #000; text-decoration:none; cursor:default; } ul.pureCssMenu span{ overflow:hidden; } ul.pureCssMenu li { float:left; } ul.pureCssMenu ul li { float:none; } ul.pureCssMenu ul a { text-align:left; white-space:nowrap; } ul.pureCssMenu li.sep{ text-align:left; padding:0px; line-height:0; height:100%; } ul.pureCssMenu li.sep span{ float:none; padding-right:0; width:3px; height:100%; display:inline-block; background-color:#808080; background-image:none;} ul.pureCssMenu ul li.sep span{ width:100%; height:3px; } ul.pureCssMenu li:hover{ position:relative; } ul.pureCssMenu li:hover>a{ background-color:#DBF0F9; border-color:#45ADE4; border-style:solid; font:normal 11px Tahoma; color: #444; text-decoration:none; } ul.pureCssMenu li a:hover{ position:relative; background-color:#DBF0F9; border-color:#45ADE4; border-style:solid; font:normal 11px Tahoma; color: #444; text-decoration:none; } ul.pureCssMenu li.dis a { color: #557D4F !important; } ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px; height:16px; } ul.pureCssMenu ul img {width:16px; height:16px; } ul.pureCssMenu img.over{display:none} ul.pureCssMenu li.dis a:hover img.over{display:none !important} ul.pureCssMenu li.dis a:hover img.def {display:inline !important} ul.pureCssMenu li:hover > a img.def {display:none} ul.pureCssMenu li:hover > a img.over {display:inline} ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover img.over{display:inline} ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover img.def{display:none} ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover ul{display:block} ul.pureCssMenu a:hover ul ul,ul.pureCssMenu a:hover a:hover ul ul{display:none} ul.pureCssMenu span{ display:block; background-image:url(./images/arrv_white.gif); background-position:right center; background-repeat: no-repeat; padding-right:9px;} ul.pureCssMenu ul span{background-image:url(http://img9.imageshack.us/img9/4698/arrblack.gif)} ul.pureCssMenu ul li:hover > a span{ background-image:url(http://img822.imageshack.us/img822/7830/arrwhite.gif);} ul.pureCssMenu table a:hover span,ul.pureCssMenu table a:hover a:hover span,ul.pureCssMenu table a:hover a:hover a:hover span{background-image:url(http://img703.imageshack.us/img703/6775/arrvwhite.gif)} ul.pureCssMenu table a:hover table span,ul.pureCssMenu table a:hover a:hover table span{background-image:url(http://img9.imageshack.us/img9/4698/arrblack.gif)} ul.pureCssMenu li.pureCssMenui0 { width:110px; height:23px; } ul.pureCssMenu li a.pureCssMenui0{ height:100%; background-image:url(http://img225.imageshack.us/img225/5011/btn3.jpg); border-width:0px; font:normal 11px Tahoma; color:#fff; } ul.pureCssMenu li a.pureCssMenui0:hover{ background-image:url(http://img156.imageshack.us/img156/3462/btn4n.jpg); font:normal 11px Tahoma; color:#eee; } ul.pureCssMenum0 { background-color:transparent; border-width:0px; padding:0px 0px 0px 0px; } ul.pureCssMenum0>li>a { padding:8px 10px 0px 10px; } ul.pureCssMenum0 a { padding:8px 10px 0px 10px; } ul.pureCssMenum0 ul a { padding:2px 5px 5px 10px; } ul.pureCssMenum0>li { margin:0px 0px 0px 0px; } ul.pureCssMenum0 li { margin:0px 0px 0px 0px; } ul.pureCssMenum0 li li { margin:2px 0px 0px 2px; } </style>   <ul class="pureCssMenu pureCssMenum0"> <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Anasayfa</a></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="#"><span>Ana link 1</span><![if gt IE 6]></a><![endif]> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="#">What is New?</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Menu Features</span><![if gt IE 6]></a><![endif]> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Free Online Generator</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">100% Pure CSS Menu</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">No Javascript Required</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Multi Level Submenus</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Search-Engine Friendly</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Advanced Styling</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Horizontal & Vertical</a></li> </ul> </li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>How To Use</span><![if gt IE 6]></a><![endif]> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="#">1. Select Template</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">2. Customize Items</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">3. Download Zip</a></li> </ul> </li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Supported Browsers</span><![if gt IE 6]></a><![endif]> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Windows OS</span><![if gt IE 6]></a><![endif]> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Internet Explorer</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Firefox</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Chrome</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Safari</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Mozilla</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Opera</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Netscape Navigator</a></li> </ul> </li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>MAC OS</span><![if gt IE 6]></a><![endif]> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Firefox</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Safari</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Internet Explorer</a></li> </ul> </li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Unix/Linux OS</span><![if gt IE 6]></a><![endif]> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Firefox</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Konqueror</a></li> </ul> </li> </ul> </li> </ul> </li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="#"><span>Ana link 2</span><![if gt IE 6]></a><![endif]> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 1</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 2</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 3</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 4</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 5</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 6</a></li> </ul> </li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">FAQ</a></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Contact Us</a></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Contact </a></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Cont </a></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">iLETİŞİM</a></li> </ul> <a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a>   </body> </html></td> <td> </td> </tr> </table></td> </tr> </table> <table width="980" height="63" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="left" valign="top" background="http://img37.imageshack.us/img37/1070/kodbanksmetalcss2.png"><table width="980" height="64" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="15"> </td> <td width="180" align="left" valign="top"> <span style="color: #000000"> <table border="0" cellspacing="1" cellpadding="1" width="169" style="width: 169px; height: 123px"> <tbody> <tr> <td bgcolor="#000000" style="text-align: center"><span style="color: #ffffff">Buradasın-Css gri tasarÄ±m</span></td> </tr> <tr> <td> <style type="text/css">  </style> <script language="javascript">  </script> <table class="coolmenu" bgcolor="black" border="0" bordercolor="ivory" cellpadding="4" cellspacing="0"> <tr> <td bordercolor="black" id="choice1" onmouseover="movein(this,'LİNK 1 AÇIKLAMA')" onmouseout="moveout(this)""> <a href="LİNK 1 ADRES">»Anasayfa</a></td></tr> <td bordercolor="black" id="choice2" onmouseover="movein(this,'LİNK 2 AÇIKLAMA')" onmouseout="moveout(this)"> <a href="LİNK 2 ADRES">»LİNK 2</a></td></tr> <td bordercolor="black" id="choice3" onmouseover="movein(this,'LİNK 3 AÇIKLAMA')" onmouseout="moveout(this)"><a href="LİNK 3 ADRES">»LİNK 3</a></td></tr> <td bordercolor="black" id="choice4" onmouseover="movein(this,'LİNK 4 AÇIKLAMA')" onmouseout="moveout(this)"><a href="LİNK 4 ADRES">»LİNK 4</a></td></tr> <tr> <td bordercolor="black" id="boxdescription"></td></tr> </table></td> </tr> </tbody> </table> <br /> <table border="0" cellspacing="1" cellpadding="1" width="169" style="width: 169px; height: 123px"> <tbody> <tr> <td bgcolor="#000000" style="text-align: center"><span style="color: #ffffff">Kategoriler</span></td> </tr> <tr> <td> <a href="ADRES" title="ALT YAZI">» Link adı- 1</a></td> </tr> <tr> <td><span style="color: #000000"> <a href="ADRES" title="ALT YAZI">» Link adı- 2</a></span></td> </tr> <tr> <td><span style="color: #000000"> <a href="ADRES" title="ALT YAZI">» Link adı- 3</a></span></td> </tr> <tr> <td><span style="color: #000000"> <a href="ADRES" title="ALT YAZI">» Link adı- 4</a></span></td> </tr> <tr> <td><span style="color: #000000"> <a href="ADRES" title="ALT YAZI">» Link adı- 5</a></span></td> </tr> <tr> <td><span style="color: #000000"> <a href="ADRES" title="ALT YAZI">» Link adı- 6</a> </span></td> </tr> </tbody> </table> <br /> <table border="0" cellspacing="1" cellpadding="1" width="169" style="width: 169px; height: 123px"> <tbody> <tr> <td bgcolor="#000000" style="text-align: center"><span style="color: #ffffff"> <style>  </style> <span id="digitalclock" class="styling"></span> <script>  </script></span><br> <script language="JavaScript">  </script></td> </tr> <tr> <td style="text-align: left"><script type="text/javascript" src="http://www.yourjavascript.com/91330002023/Kodbanks-sosyal-ag-pyls.js"></script> </td> </tr> </tbody> </table> </span> </div></td> <td width="21"> </td> <td width="536" align="left" valign="top"><div id="container"></div>

Tasarımın altı:
KOD:

</td> <td width="22"> </td> <td width="177" align="left" valign="top"> <span style="color: #000000"> <table border="0" cellspacing="1" cellpadding="1" width="169" style="width: 169px; height: 123px"> <tbody> <tr> <td bgcolor="#000000" style="text-align: center"><span style="color: #cccccc">Site adınız</span></td> </tr> <tr> <td><ul class="menu"> <li> <a href="http://www.cssornekleri.com/menu/liste" _fcksavedurl="http://www.cssornekleri.com/menu/liste"> <img src="http://www.cssornekleri.com/img/menu/dikey_resimli/user.png" _fcksavedurl="http://www.cssornekleri.com/img/menu/dikey_resimli/user.png" alt=""> <span class="name">Ana Sayfa</span> <span class="description">açıklama </span> </a> </li><li> <a href="http://www.cssornekleri.com/menu/liste" _fcksavedurl="http://www.cssornekleri.com/menu/liste"> <img src="http://www.cssornekleri.com/img/menu/dikey_resimli/comment.png" _fcksavedurl="http://www.cssornekleri.com/img/menu/dikey_resimli/comment.png" alt="comment.png"> <span class="name">Hakkımızda</span> <span class="description">açıklama </span> </a></li><li> <a href="http://www.cssornekleri.com/menu/liste" _fcksavedurl="http://www.cssornekleri.com/menu/liste"> <img src="http://www.cssornekleri.com/img/menu/dikey_resimli/print.png" _fcksavedurl="http://www.cssornekleri.com/img/menu/dikey_resimli/print.png" alt="print.png"> <span class="name">Referanslar</span> <span class="description">açıklama </span> </a></li><li> <a href="http://www.cssornekleri.com/menu/liste" _fcksavedurl="http://www.cssornekleri.com/menu/liste"> <img src="http://www.cssornekleri.com/img/menu/dikey_resimli/edit.png" _fcksavedurl="http://www.cssornekleri.com/img/menu/dikey_resimli/edit.png" alt="edit.png"> <span class="name">Hizmetlerimiz</span> <span class="description">açıklama </span> </a></li></ul> <style type="text/css">.menu , .menu ul { width:166px; margin:auto; padding:0px; list-style-type: none; overflow:hidden; border:1px solid #eee;}.menu li { float:left; position:relative;}.menu li img { float:left; margin: 0px 0 0 0px; border:none;}.menu li a .name { float:left; width:140px; margin:0 0 0 0px; font-weight:bold; font-size:0.7em; cursor:pointer;}.menu li a:active, .menu li a:focus { outline:0;}.menu li a .description{ float:left; width:140px; margin:-0px 0 0 0px; font-weight:normal; font-size:0.7em; cursor:pointer;}.menu li a:link, .menu li a:visited { height:35px; font-size:1em; color:#000; text-decoration:none; line-height:20px; border:1px solid #fff; display:block; font-weight:bold;}.menu li a:hover { background:#eee;}</style> </td> </tr> </tbody> </table> <br /> <table border="0" cellspacing="1" cellpadding="1" width="169" style="width: 169px; height: 123px"> <tbody> <tr> <td bgcolor="#000000" style="text-align: center"><span style="color: #ffffff">Msn Messenger</span></td> </tr> <tr> <td><a href="ADRES" _fcksavedurl="ADRES" title="ALT YAZI">» Msn nedir?</a></td> </tr> <tr> <td><span style="color: #000000"><a href="ADRES" _fcksavedurl="ADRES" title="ALT YAZI">» Msn Surumleri</a></span></td> </tr> <tr> <td><span style="color: #000000"><a href="ADRES" _fcksavedurl="ADRES" title="ALT YAZI">» Msn Hatalari</a></span></td> </tr> <tr> <td><span style="color: #000000"><a href="ADRES" _fcksavedurl="ADRES" title="ALT YAZI">» Msn Surumleri</a></span></td> </tr> <tr> <td><span style="color: #000000"><a href="ADRES" _fcksavedurl="ADRES" title="ALT YAZI">» Msn Nickleri</a></span></td> </tr> <tr> <td><span style="color: #000000"><a href="http://berilsyn.tr.gg/Animasyon-Video.htm" _fcksavedurl="http://berilsyn.tr.gg/Animasyon-Video.htm" title="ALT YAZI">» Msn Avatarları </a> </span></td> </tr> </tbody> </table> <br /> <table border="0" cellspacing="1" cellpadding="1" width="169" style="width: 169px; height: 123px"> <tbody> <tr> <td bgcolor="#000000" style="text-align: center"><span style="color: #00ff00">19Kişi-24sayfa</span></td> </tr> <tr> <td style="text-align: center"> Sayaç+Banner </td> </tr> </tbody> </table> </span> </div></td> <td width="13"> </td> </tr> </table></td> </tr> </table> <table width="980" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="110" align="left" valign="top" background="http://img404.imageshack.us/img404/5845/kodbanksmetalcssa03.png"><table width="980" height="100"> <tr> <td width="11"> </td> <td width="944"> </td> <td width="10"> </td> </tr> <tr> <td height="71"> </td> <td align="left" valign="middle"><div style="text-align: center"><img alt="" src="http://img192.imageshack.us/img192/7356/kodbanksyenibsl.gif" _fcksavedurl="http://img192.imageshack.us/img192/7356/kodbanksyenibsl.gif" /></div></td> <td> </td> </tr> </table></td> </tr> </table> <style>  </style>

Css kodu:

h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;} table {margin-left: auto;margin-right: auto} body,td,th { font-family: tahoma; font-size: 12px; color: #ffffff; font-weight: normal; } body { background-image: url(ARKA PLAN URL); } a { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #333399; font-weight: normal; } <style type="text/css"> /*Credits: LifeCity CSS Menu */ /*URL: http://www.lifecity.tr.gg*/ .arrowlistmenu{ width: 180px; /*width of menu*/ } .arrowlistmenu .headerbar{ font: bold 13px Arial; color: white; background: black url(https://img.webme.com/pic/l/lifelist/mavi_menubar.gif) repeat-x center left; margin-bottom: 10px; /*bottom spacing between header and rest of content*/ text-transform: uppercase; padding: 4px 0 4px 10px; /*header text is indented 10px*/ } .arrowlistmenu ul{ list-style-type: none; margin: 0; padding: 0; margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/ } .arrowlistmenu ul li{ padding-bottom: 2px; /*bottom spacing between menu items*/ } .arrowlistmenu ul li a{ color: #666666; background: url(https://img.webme.com/pic/l/lifelist/arrow_menu.png) no-repeat center left; /*custom bullet list image*/ display: block; padding: 2px 0; padding-left: 19px; /*link text is indented 19px*/ text-decoration: none; font-weight: normal; border-bottom: 1px solid #dadada; font-size: 85%; } .arrowlistmenu ul li a:visited{ color: #666666; } .arrowlistmenu ul li a:hover{ /*hover state CSS*/ color: #8F8F8F; background-color: #F3F3F3; }

Css gri tasarım

Ana menu

Fbml kodları

Dost siteler