使用CSS对中框

我正在尝试将我设计的布局转换为HTML+CSS的网页

布局如下所示：

我希望中间的黑色div（具有固定宽度）居中，而菜单应保持在其左侧，并填充整个屏幕左侧，如上图所示

问题是，我不知道如何设置菜单的样式以填充整个左侧，从而获得图像中显示的鼠标悬停效果

---

非常感谢。

您可以让菜单填满整个宽度，并将黑色徽标元素置于其上方

<div id="menu">
  <div id="centered_wrapper">
    <div id="logo"></div>
  </div>
  <ul>
    <li><a href="#">&gt; home</a>
    <li><a href="#">&gt; azienda</a>
    <li><a href="#">&gt; lavorazioni</a>
    <li><a href="#">&gt; contattaci</a>
  </ul>
</div>

您会注意到，菜单项的：悬停效果也将显示在右侧。您可以通过应用非重复背景图像（位于水平轴上50%）来修复此问题。一半图像透明，一半图像为悬停效果。有足够的长度

#menu li:hover {
    background: url(hover_effect.png) repeat-y 50% 0;
}

---

虽然你很快就会在这里得到答案，但这听起来似乎更适合姐妹网站。非常感谢Magnar！稍后我会尝试一下，看看它到底是如何工作的，但我认为它应该是好的！再次感谢

#menu li:hover {
    background: url(hover_effect.png) repeat-y 50% 0;
}