html - 如何使用 HTML/CSS 中的标题制作菜单背景

Question

问题:即使有标题也无法制作菜单背景。 (你会在图片中看到它)

PICTURE

如何切断它们？

CSS 代码:

.header {
    margin:0px auto;
    max-width: 960px;
}

#header {
    height:300px;
    width:960px;
    background-image:url("img/top.png")
}
#menu ul {
    margin:0px auto;
    margin-left:-59px;
    list-style: none;
    background:#3d3d5c;
}

#menu li {
    display: inline-block;
}

#menu li a  {
    color:#fff; 
    text-decoration:none; 
    display:block; 
    background:url(img/manu.png); 
    padding:0 10px 0 10px;  
    height:54px; 
    width:130px;
    line-height:54px;
}

#menu li a:hover {
    color:#fff; 
    text-decoration: none; 
    background:url(img/manu1.png);  
    height:54px; 
    width:130px;
    line-height:54px;
}

这是 jsfiddle:http://jsfiddle.net/cvk5a3nn/5/

Answer 1

下面更新的遗嘱应该可以解决您的问题:

#menu ul {
    margin:0px auto;
    margin-left:-20px; /*pull towards left*/
    margin-right:20px; /*push towards right*/
    list-style: none;
    background:#3d3d5c;
}