html - お互いを押しのけるアイテム

Question

だから私はうまく機能する個々のセクションを持つ水平方向のウェブサイトをやっていますが、メニューを追加したので、コンテンツ領域と背景全体を台無しにするだけで問題が発生しています. 私はこれまで何の効果もなかったz-indexを使用してみました...そしてその前にアイテムを置いて、それを押し出すだけです。

私の CSS ナビゲーション バー

    #Navigation
{
margin: 0px;
padding: 20px 0px 0px 700px;
font-family: 'american_captainregular', Helvetica, Arial, sans-serif;
font-size: 55px;
float:left;
} 

#Navigation ul, #Navigation li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#Navigation a:link, #Navigation a:visited
{
float: left;
line-height: 14px;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #999;
}
#Navigation a:hover { color: #000; }

画像の私のCSS

#HomeText{
background-repeat: no-repeat;
background-image: url(Images/HomeText.png);
float:left;
height:158px;
width:450px;
margin-left:461px;
margin-top:126px;

}

HTML

<div id="Content">
<div class="Tabs TabOne" id="HomeTab">

<ul class="MyNav" id="Navigation">
<li><a href="#" class="home">Home</a></li>
<li><a href="#AboutTab" class="about">About</a></li>
<li><a href="#PortfolioTab" class="portfolio">Portfolio</a></li>
</ul>
    <div id="HomeText"></div>
</div>

念のため、私のセクションの CSS

    .Tabs{
    margin:0px;
    bottom:0px;
    float:left;
    width:3500px;

}

.TabOne{
background: url(Images/BG1.jpg) no-repeat;
}

これほど要素がページに押し下げられるというこの種の問題に遭遇したことはありません

http://jsfiddle.net/BoneStarr/AGfwn/