如何让徽标悬停在菜单中？

Question

我从here下载了一个CSS菜单并试图进行一些更改，这里是文件jsfiddle和full screen结果。

现在我尝试做两件事：

• 让Logo文字/图片无法悬停
• 修正宽度，我把100％但是如果你看全屏结果你会注意到什么是错的

Answer 1

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

这将确保悬停效果不会应用于您的案例中包含徽标的第一个<li>。 jsFiddle

这称为CSS Selectors Level 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/

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