这是我第一次使用这个网站,我一直在尝试做一些翻转导航。所有图像都会产生悬停效果,但它们彼此堆叠而不是彼此相邻。如何让它们水平布局而不是垂直布局?
我的代码如下。
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>