 <p>Hi i think you should like this I check to your code and some modify and created easily code to your navi and logo Please Checked'</p> <p><strong>Css</strong></p> <pre><code>.header, .navi, ul, li, a, span{ margin:0; padding:0; } .header{ overflow:hidden; z-index:5; } .logo{ position:relative; z-index:1; height:188px; width:100%; } .navi{ position:absolute; left:40%; right:0; z-index:2; top:148px; list-style:none; } li{ float:left; background:url('http://soteriabrighton.co.uk/test2/nav/images/top.png') no-repeat 10% 0; margin-left:2%; } .navi a{ background:url('http://s16.postimage.org/yqxo6bq6p/navi_left.png') no-repeat left top; padding-left:9px; color:#000; margin-top:27px; text-decoration:none; font-size:22px; float:left; border-radius:5px 0 0 5px; } .navi a span{ background:url('http://s17.postimage.org/ukpot5zcb/navi_right.png') no-repeat right top; padding-right:9px; float:left; line-height:38px; border-radius:0 5px 5px 0; } .navi a:hover span, .navi a:hover{ background:green; color:#fff; border-radius:5px; } </code></pre> <p><strong>HTML</strong></p> <pre><code>&lt;div class="header"&gt; &lt;img src="http://soteriabrighton.co.uk/test2/logo.png" alt="" class="logo" /&gt; &lt;ul class="navi"&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;news&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;forums&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;articles&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>Live demo here <a href="http://jsfiddle.net/Kj2e9/" rel="nofollow">http://jsfiddle.net/Kj2e9/</a></p>