0

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

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

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

4

1 回答 1

2

所以只用 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;
}
于 2012-09-20T21:19:01.337 回答