Html 为从切片生成的导航项添加背景色

我正在设计一个自定义的导航菜单，你可以看到它的当前状态。每个单独的导航项如下所示：

因此，基本上每个导航项目都“悬挂”在水平条上。图像的主要部分由图像的三个切片组成：

左：右：和中间：

中间DIV的背景应用了repeat-x，因此它将增长以适合导航项的内容，即文本

这是我目前用于左、右和中div的CSS：

.left {
    float: left;
    width: 13px;
    background-image: url(nav/images/nav_01.png);
    background-repeat: no-repeat;
    height:46px;
    margin-left:2%;
}

.middle {
    width:auto;
    float:left;
    background-image: url(nav/images/nav_02.png);
    background-repeat: repeat-x;
    font-size:20px;
    font-family: Typewriter;
    color:#393526;
    height:46px;
    padding-left:1px;
}

.right {
    float: left;
    width: 13px;
    background-image: url(nav/images/nav_03.png);
    background-repeat: no-repeat;
    height:46px;
}

到目前为止还不错，但我必须考虑如何包括垂直条，将主水平条连接到为导航项目构建的图像，使其始终居中。我这样做的方式是在中间div中包含一个div，如下所示：

<li>
<div class="nav_image">
<div class="left"></div>
<div class="middle"><div class="top"></div>home</div>
<div class="right"></div>
</div>
</li>

“导航图像”DIV顶部的正边距：

.nav_image {
    margin-top:27px;
}

我不确定这是否是实现我所追求的目标的最佳方式，但到目前为止，它正在发挥作用

我遇到的问题是为“nav_image”DIV设置背景色。我想为此设置一种颜色，并在悬停时设置另一种颜色。我希望我可以给这个DIV添加圆角，然后为它设置一个背景色，显示在背景图像后面

目前，DIV‘nav_图像’显示的宽度为1200px，高度为0px。我本以为它会继承三个子div的总宽度，即左、中、右，但显然这不是现在发生的事情。因此，我似乎没有一个DIV应用背景色

我希望这是明确的，谢谢阅读，我很高兴得到任何关于这方面的建议

尼克。

1）将这些添加到css中：

ul#list-nav li {
    float:left;
    display:inline;
}

.clear {
    clear:both;
}

2） 在每个

之后添加

3） 删除

.left

的

左边距：2%（将边距添加到
ul#list nav li
）

nav_图像
现在应该具有正确的宽度和高度
您好，我想您应该喜欢这个我检查了您的代码，并对您的navi和徽标进行了一些简单的修改和创建代码，请检查'

Css

.header, .navi, ul, li, a, span{
    margin:0;
    padding:0;
}
    .header{
        overflow:hidden;
        z-index:5;    }


        .logo{
            position:relative;
            z-index:1;
    height:188px;
    width:100%;
        }


        .navi{
            position:absolute;
            left:40%;
            right:0;
            z-index:2;
            top:148px;
            list-style:none;
        }


        li{
            float:left;
            background:url('http://soteriabrighton.co.uk/test2/nav/images/top.png') no-repeat 10% 0;
            margin-left:2%;
        }
        .navi a{
            background:url('http://s16.postimage.org/yqxo6bq6p/navi_left.png') no-repeat left top;
            padding-left:9px;
            color:#000;
            margin-top:27px;
            text-decoration:none;
            font-size:22px;
            float:left;
                border-radius:5px 0 0 5px;
        }
        .navi a span{
            background:url('http://s17.postimage.org/ukpot5zcb/navi_right.png') no-repeat right top;
            padding-right:9px;
            float:left;
            line-height:38px;
            border-radius:0 5px 5px 0;
        }
        .navi a:hover span, .navi a:hover{
            background:green;
            color:#fff;
            border-radius:5px;
        }

HTML

<div class="header">
        <img src="http://soteriabrighton.co.uk/test2/logo.png" alt="" class="logo" />
        <ul class="navi">
            <li><a href="#"><span>home</span></a></li>
            <li><a href="#"><span>news</span></a></li>
            <li><a href="#"><span>forums</span></a></li>
            <li><a href="#"><span>articles</span></a></li>
            <li><a href="#"><span>contact</span></a></li>
        </ul>
    </div>










在这里进行实时演示
您可以简化标记以便于开始

<li>
    <a>
         Home
    </a>
</li>

谢谢我喜欢更简单的标记。我已经在测试页面上实现了您的代码。伪元素和主元素是重叠的。此外，我还有一个问题，就是悬停图像边缘的背景色。最后，使用您的方法包含将主栏链接到导航项的垂直图像的最佳方式是什么？我的原始页面使用了更复杂的标记，因此您可以看到我的目标。谢谢，这非常有帮助。通过在左、右、中、顶div中添加代码和一些边距，我成功地获得了我想要的效果。我现在对页面的代码做了更多的修改，这样背景图像上的悬停效果只有在悬停在导航项的下部时才会触发。你可以看到最新的一页。我想知道您是否有任何关于简化每个导航项目的标记的想法，正如下面j-man86所建议的那样。
<li>
    <a>
         Home
    </a>
</li>

li a {
    padding: 0 13px;
    width:auto;
    float:left;
    display: block;
    position: relative;
    background-image: url(nav/images/nav_02.png);
    background-repeat: repeat-x;
    font-size:20px;
    font-family: Typewriter;
    color:#393526;
    height:46px;
    padding-left:1px;
}

li a:before,
li a:after {
    content: ' ';
    width: 13px;
    height:46px;
    position: absolute;
    top: 0;
    background-repeat: no-repeat
}

li a:before {
    left: 0;
    background-image: url(nav/images/nav_03.png);
}

li a:after {
    right: 0;
    background-image: url(nav/images/nav_01.png);
}