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 添加到父元素，以便它环绕导航的 float 列表项。

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