css - 如何使徽标不在菜单中悬停？

Question

我从这里下载了一个 CSS 菜单并尝试进行一些更改，这里是小提琴文件jsfiddle和全屏结果。

现在我尝试做两件事：

• 使Logo文本/图像没有悬停
• 修复宽度，我设置了 100% 但是如果你看全屏结果你会发现哪里出了问题

Answer 1

将第 42 行更改为：#navbar li:not(:first-child):hover {

这将确保悬停效果不会应用于<li>在您的情况下包含徽标的第一个。jsFiddle

这称为CSS 选择器级别 3

要修复您的导航位置，请使用：

#nav {
    width: 100%;
    position: fixed;
    margin: 0 auto;
    left: 0px;
}

编辑：如果你仍然想要每边的小边距，请使用：

#nav {
    position: fixed;
    margin: 0;
    left: 1%; /* you can change this to whatever margin you like */
    right: 1%;
}

并添加：

#navbar {
    width: auto;
}

Answer 2

试试#navbar>li:first-child~li:hover。我更新了你的小提琴

http://jsfiddle.net/PHPglue/h4uL6/7/

如果出于某种原因确实需要固定位置，请将整个代码包装在 a<div>中，position:absolute;并给它与我给它的宽度和边距相同的宽度和边距，#nav然后<div>make #nav's position:fixed;。