css - CSSナビゲーション画像はスタックを停止しません

Question

このサイトを使用するのはこれが初めてです、私はいくつかのロールオーバーナビゲーションを作成しようとして立ち往生しています。すべての画像はホバーオーバー効果を実行しますが、画像は隣り合っているのではなく、重なり合っています。垂直方向ではなく水平方向にレイアウトするにはどうすればよいですか？

私のコードは以下の通りです。

CSS：

html, body{margin: 0; padding: 0; background-color: #c0c0c0;}
p{width:900px; position: relative; left: 30px;}
h2{width:900px; position: relative; left: 30px;}
.container{width:960px; margin: auto;}  

.header{height: 124px;}                     
.navigation{height: 59px; width: 960px;}

.navigation1{
        display: block;
    width: 136px;
    height: 59px;
        background-image: url('http://fakehost:8888/TheWorksPlumbing/images/navigationImages/nav_01.jpg');
    background-position:0px -59px;
        text-indent: -99999px;
}
.navigation1:hover{background-position:0px 0px;}

.navigation2{
        display: block;
        width: 138px;
    height: 59px;
        background-image: url('http://fakehost:8888/TheWorksPlumbing/images/navigationImages/nav_02.jpg');
    background-position:0px -59px;
        text-indent: -99999px;
}
.navigation2:hover{background-position: 0 0;}

.navigation3{
        display: block;
        width: 170px;
    height: 59px;
        background-image: url('http://fakehost:8888/TheWorksPlumbing/images/navigationImages/nav_03.jpg');
    background-position:0px -59px;
        text-indent: -99999px;
}
.navigation3:hover{background-position: 0 0;}

.navigation4{
        display: block;
        width: 138px;
    height: 59px;
        background-image: url('http://fakehost:8888/TheWorksPlumbing/images/navigationImages/nav_04.jpg');
    background-position:0px -59px;
        text-indent: -99999px;
}
.navigation4:hover{background-position: 0 0;}

.navigation5{
        display: block;
        width: 168px;
    height: 59px;
        background-image: url('http://fakehost:8888/TheWorksPlumbing/images/navigationImages/nav_05.jpg');
    background-position:0px -59px;
        text-indent: -99999px;
}
.navigation5:hover{background-position: 0 0;}

.navigation6{       
        display: block;
        width: 210px;
    height: 59px;
        background-image: url('http://fakehost:8888/TheWorksPlumbing/images/navigationImages/nav_06.jpg');
    background-position:0px -59px;
        text-indent: -99999px;
}
.navigation6:hover{background-position: 0 0;}

.mainAd{height: 271px;}                     
.mainbody{background-color: white;}
.map{position: relative; left: 30px;}
.footer{height: 197px;} 

HTML：

        <div class="container">
            <div class="header"><img src="http://localhost:8888/TheWorksPlumbing/images/Layout_01.jpg"></div>
             <div class="navigation" >
                 <div class="navigation1"><a href="home">Home</a></div>
                 <div class="navigation2"><a href="about">About</a></div>
                 <div class="navigation3"><a href="services">Services</a></div>
                 <div class="navigation4"><a href="rates">Rates</a></div>
                 <div class="navigation5"><a href="specials">Specials</a></div>
                 <div class="navigation6"><a href="contact">Contact</a></div>
             </div>
</div>

Answer 1

float: left;

各ナビゲーション要素でそれらを水平にします。

あなたのコードは非常に複雑だと思いますが。たぶん、リストを使用して、一般的なスタイルを以下に凝縮してみてください

ul.navigation li {
     float: left
     .....
}

また、overflow: hidden を親要素に追加して、ナビゲーションの浮動リスト項目をラップする必要がある可能性があります。

ul.navigation {
    width: 960px;
    overflow: hidden;
}

Answer 2

この CSS を追加します。

.navigation div {
    float: left;
}