我一直在离线处理我的导航菜单,在本地看起来很好,但是当我将它上传到网上时,一半的更改在 Chrome 上没有生效,在 Firefox 上它仍然给我一个与我试图创建的不同的设计。只是想知道我在这里可能做错了什么。我提供了设计链接,以及当前进度的实时网址。
我试图解决的几件事是:
1 - 只是试图让整体设计正确 2 - 每个菜单项之间有空格,也需要删除。
网址:http ://www.jordancharters.co.uk/nakedradish
HTML
<div id="navigation">
<ul>
<li class="home-nav-bg"><a href="#"></a>
<li class="how-nav-bg"><a href="#">Example Us</a>
<li class="boxes-nav-bg"><a href="#">Example</a>
<li class="recipes-nav-bg"><a href="#">Example</a>
<li class="food-nav-bg"><a href="#">Example</a>
<li class="kitchen-nav-bg"><a href="#">Example</a>
<li class="nav-end-bg"><a href="#"></a></li>
</ul>
</div>
CSS
#navigation {
margin-top: 10px;
margin-bottom: 20px;
float: right;
width: 700px;
margin-right: -50px;
}
#navigation ul {
text-decoration: none;
list-style-type: none;
display: block;
}
#navigation li {
font-size: 0.8em;
color: #fff;
display: inline;
text-align: right;
}
#navigation li a {
font-size: 0.8em;
color: #fff;
display: inline;
padding-left: 20px;
padding-right: 20px;
text-align: right;
}
.home-nav-bg {
background-image: url('../img/home-nav-bg.png');
padding-right: 40px;
padding-top: 17px;
padding-bottom: 18px;
}
.how-nav-bg {
background-color: #bf0e51;
padding-left: 5px;
padding-right: 5px;
padding-top: 17px;
padding-bottom: 18px;
}
.boxes-nav-bg {
background-color: #bf0e51;
padding-left: 5px;
padding-right: 5px;
padding-top: 17px;
padding-bottom: 18px;
}
.recipes-nav-bg {
background-color: #bf0e51;
padding-left: 5px;
padding-right: 5px;
padding-top: 17px;
padding-bottom: 18px;
}
.food-nav-bg {
background-color: #bf0e51;
padding-left: 5px;
padding-right: 5px;
padding-top: 17px;
padding-bottom: 18px;
}
.kitchen-nav-bg {
background-color: #bf0e51;
padding-left: 5px;
padding-right: 5px;
padding-top: 17px;
padding-bottom: 18px;
}
.nav-end-bg {
background-image: url('../img/nav-end-bg.png');
padding-left: 5px;
padding-right: 12px;
padding-top: 17px;
padding-bottom: 45px;
}