居中内容布局，侧边栏链接突出显示到浏览器边缘

Question

我正在使用固定宽度、居中、两列布局（侧边栏和内容），我的网站主导航位于侧边栏中。当用户将鼠标悬停在导航中的特定链接上或当前正在查看该特定页面时，我希望有一个悬停/突出显示的阶段，其中导航链接具有一直运行到浏览器边缘的背景颜色。

例如，我的布局的侧边栏宽度为 200 像素，位于左侧。我的内容栏宽 700 像素，位于侧边栏的右侧。我有一个“包装器” div，侧边栏和内容 div 都设置为 900px 宽，并以“margin：0 auto”为中心。如果用户将鼠标悬停在导航中的链接上，我希望该链接的背景颜色不仅位于链接后面，而且还继续到浏览器窗口的左边缘，无论用户有多宽浏览器窗口设置在。

此处的布局示例：http://i.imgur.com/QfY8b.gif

Answer 1

所以只用 CSS 做你想做的事。基本上将每个 li 项目设置为具有较大的宽度。然后使用 text-align 将文本设置为向右对齐。设置填充（右）以确保文本没有亲吻侧面。最后使用 :hover 选择器使每个 li 单独点亮（通过设置新的 CSS 代码）。

请注意，#nav 是 ul 列表的 id。确保使导航菜单类似于：

HTML

<ul id='nav'>
    <li>Nav Link</li>
    <li>Navy Link</li>
    <li>Nav Links</li>
</ul>

CSS

#nav{
    float:left;
}
#nav li{
    width:200px;
    height:2em;
    line-height:2em;
    padding:0px 40px 0px 0px;
    margin:5px 0px 5px 0px;
    text-align:right;
}
#nav li:hover{
    background-color:#000;
    color:#fff;
}

编辑 我忘了添加链接样式。基本上继承了li的样式/大小。

#nav a{
    width:inherit;
    height:inherit;
    margin:0px;
    padding:0px;
}