<div id="applenav">
<ul>
<li><a href="#" class="apple"><img src="https://img.webme.com/pic/h/hibycocuk/apple.png" alt="Apple" border="0" /></a></li>
<li><a href="#">Mac</a></li>
<li><a href="#">iPod</a></li>
<li><a href="#">iPhone</a></li>
<li><a href="#" class="secili">iPad</a></li>
<li><a href="#">iTunes</a></li>
<li><a href="#">Destek</a></li>
</ul>

<div class="arama">
<input type="text" value="Arama" />
</div>
<br style="clear:both" />
</div>

#applenav {
padding:0px 0px 0px 0px;
background:#cacaca;
-moz-border-radius:4px; /* Mozilla için köşelerimizi yuvarlayalım */
-webkit-border-radius:4px; /* Şimdi de Chrome ve Safari için köşeleri yuvarlayalım */
background-image: -moz-linear-gradient(90deg, #848484, #cacaca); /* Mozilla için Linear Gradient kodumuzu yazdık! */
background-image: -webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#848484)); /* Chrome ve Safari için Linear Gradient kodumuzu yazdık! */
}

/* Menümüzün ul ve li etiketlerini tanımlıyoruz... */
#applenav ul, #applenav li {list-style:none;margin:0;padding:0;} 

/* Şimdi menü bağlantılarımızı tanımlamaya başlıyoruz... */
#applenav a {
font:bold 12px/36px arial, verdana, sans-serif;
text-decoration:none;
display:block;
float:left;
width:100px;
height:36px;
color:#252525;
background:#cacaca;
background-image: -moz-linear-gradient(90deg, #848484, #cacaca); /* Menü birimlerindeki Gradienti tanımladık! */
background-image: -webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#848484)); /* Chrome ve Safari'yi unutmadık  */
text-shadow:0px 1px 1px #ddd; /* Biraz gölge ekleyelim  */
border-right:1px solid #959595;
text-align:center;
}

#applenav a:hover {
font:bold 12px/36px arial, verdana, sans-serif;
text-decoration:none;
display:block;
float:left;
width:100px;
height:36px;
color:#fff;
background:#cacaca;
background-image: -moz-linear-gradient(90deg, #555, #909090); /* Menü hover içindeyken değişen gradientimiz... */
background-image: -webkit-gradient(linear, left top, left bottom, from(#909090), to(#555));
text-shadow:0px 0px 0px #ddd;
border-right:1px solid #909090;
text-align:center;
}

#applenav a.apple {
-moz-border-radius:4px 0px 0px 4px;
-webkit-border-radius:4px 0px 0px 4px;
text-decoration:none;
display:block;
float:left;
width:100px;
color:#fff;
background:#cacaca;
background-image: -moz-linear-gradient(90deg, #848484, #cacaca);
background-image: -webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#848484));
text-shadow:0px 0px 0px #ddd;
border-right:1px solid #909090;
text-align:center;
}

#applenav a.apple:hover {
font:bold 12px/36px arial, verdana, sans-serif;
text-decoration:none;
display:block;
float:left;
width:100px;
height:36px;
color:#fff;
background:#cacaca;
background-image: -moz-linear-gradient(90deg, #555, #909090);
background-image: -webkit-gradient(linear, left top, left bottom, from(#909090), to(#555));
text-shadow:0px 0px 0px #ddd;
border-right:1px solid #909090;
text-align:center;
}

#applenav a.secili {
text-decoration:none;
display:block;
float:left;
width:100px;
color:#fff;
background:#cacaca;
background-image: -moz-linear-gradient(90deg, #525252, #333);
background-image: -webkit-gradient(linear, left top, left bottom, from(#525252), to(#333));
text-shadow:0px 0px 0px #ddd;
border-right:1px solid #909090;
text-align:center;
}

/* ARAMA ALANIMIZIN KODLARINI YAZIYORUZ */

#applenav .apple img {border:0px;}
#applenav .arama {float:left; display:block; width:140px;line-height:32px;margin-left:10px}
#applenav .arama input {
background:#fff url(https://img.webme.com/pic/h/hibycocuk/arama.png) no-repeat left center;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border:1px solid #999;
width:120px;
font:11px arial, verdana, sans-serif;
padding:2px 2px 2px 20px;
color:#999;
}