Örnek Çalışmayı buraya komple bilgisayarınıza indirebilirsiniz. Burada main_menu olarak belirttiğimiz alan sayfanın içerik alanıdır. Menü arka planı ile menü görünümü uyumlu olsun diye oluşturduk.

                
<div id="main_body">
<div id="menu_container">
<div id="top"></div>
<div id="css_ornegi">
<ul>
<li><a href="http://www.cssornekleri.com"><span>Ana Sayfa</span></a></li>
<li><a href="http://www.cssornekleri.com"><span>Hakkımızda</span></a></li>
<li><a href="http://www.cssornekleri.com"><span>Hizmetlerimiz</span></a></li>
<li><a href="http://www.cssornekleri.com"><span>Referanslarımız</span></a></li>
<li><a href="http://www.cssornekleri.com"><span>İnsan Kaynakları</span></a></li>
<li><a href="http://www.cssornekleri.com"><span>İletişim</span></a></li>
</ul>
</div>
</div>
</div>
         

CSS Kodu

                
<style type="text/css">
#main_body {background: #202B31; width: 400px; padding: 10px;}
ul {list-style: none;margin: 0;padding: 0;}
img {border: none;}
#menu_container {width:200px;background-color: #333A46;margin-left: 15px;margin-top: 36px;}
#top {background-image: url('nav_top.gif');background-repeat:no-repeat;background-position:top left;height: 16px;}
#bottom {background-image: url('nav_bottom.gif');background-repeat:no-repeat;background-position:bottom left;height: 16px;border-top:1px solid #000;}
#css_ornegi {width: 200px;font-family: Arial, Helvetica, sans-serif;margin: 0;font-size: 70%;font-weight: bold;}
#css_ornegi li a {height: 32px;voice-family: ""}"";voice-family: inherit;height: 24px;text-decoration: none;}
#css_ornegi li a:link, #css_ornegi li a:visited {color: #ccc;display: block;background:  url(css_ornegi.gif);padding: 8px 0 0 25px;}
#css_ornegi li a:hover, #css_ornegi li #current {color: #fff;background:  url(css_ornegi.gif) 0 -32px;border-bottom:1px solid #000;padding: 8px 0 0 27px;}
</style>