Question

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

例如，我的布局侧边栏宽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;
}

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

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

以浏览器边缘突出显示的/侧边栏链接为中心的内容布局

1 个答案: