Html 悬停属性无法正常工作

我不确定我做了什么不正确，但悬停并没有按照我想要的方式工作。如您所见，当将光标放在任何菜单上时，其背景看起来都很奇怪。 我不想复制任何东西，但我的目的是做同样的事情 一旦你把光标放在任何菜单上，一个完整的背景蓝色就会被激活，颜色名称也会变为白色。 最后，在每个菜单后面都有这些竖条。我不知道该怎么做

http://i.stack.imgur.com/OYDn5.png

.nav {
width: 1000px;
height: 35px;
background: #2F2929; 
position: relative;
top: -13px;
}

.nav ul {
list-style: none;
padding-left: 0;
text-align: center;
word-spacing: 20px;
}

.nav ul li {
display: inline-block;
padding-top: 9px;
}

.nav ul li:hover {
background: #585454;
}

.nav ul li a {
text-decoration: none;
color: white;
font-size: 14px;
font-family: "Georgia", serif;
text-transform: uppercase;
}

---

您的

li

不是其父级的高度。您可以通过对整个元素应用填充来修复（不仅仅是

padding top

）

让你成为一个

试试看

.nav{
宽度：1000px；
高度：35px；
背景:#2F2929；
位置：相对位置；
顶部：-13px；
}
美国海军{
列表样式：无；
左侧填充：0；
文本对齐：居中；
字间距：20px；
}
李国荣先生{
显示：内联块；
填充顶部：9px；
}
李丽娜先生{
显示：内联块；
文字装饰：无；
颜色：白色；
字体大小：14px；
字体系列：“格鲁吉亚”，衬线；
文本转换：大写；
}
.nav ul li a:悬停{
背景#585454；
颜色：红色；
}

项目1
项目2

也许这就是你想要做的？（如果我正确理解你的问题）

由于您希望子无序列表显示在父列表项的悬停处，因此需要以下CSS（我添加红色背景只是为了与父列表区分，它可以是您想要的任何颜色）

因为您需要一行分隔父列表项，所以我在它们的右边添加了一个边框

.nav ul li {
            border-right: 1px solid white;
            float: left;
        }

我可以试试

.nav ul.has-sub:hover > li,
.nav ul li.has-sub:hover > div {
    background: #newcolor;
    border-color: #newcolor;
}

.nav ul li.has-sub:hover > ul,
.nav ul li.has-sub:hover > div {
    display: block;
}

.nav > ul > li.has-sub > a:hover,
.nav > ul > li.has-sub:hover > a {
    background: #newcolor;
    border-color: #newcolor;
}

---

background

应该是

background color

首先，完整的标记会很有帮助，非常感谢。这正是我想要做的。同时，代码的另一部分也变得疯狂了，劳尔，请你解释一下所有这些选择器好吗？是的，对不起，我用Visual Studio格式化代码，我不确定复制/粘贴HTML时HTML发生了什么。现在编辑我的答案以包含一个解释。这就是我现在对那个div的代码：如果我尝试使用border right创建那些垂直跟踪，将会有点奇怪，因为框内会有一些空间，并且两边的极端也会有。也许，我做了坏事。不确定。如果没有看到你的标记和CSS，我就不能肯定。[URL=我键入时你的代码工作不正常。我是否做得不对？你是对的，我的朋友。请你解释一下这一部分：“你的li不是其父代的高度。”我不明白。抱歉。你的代码很好，但在悬停和新闻左侧（和商店右侧）之间有一个空格.有什么办法可以解决吗？JesseEarley也创建了一个代码，菜单之间有垂直的白色痕迹，如何在代码中做到这一点？提前感谢您查看：菜单没有居中对齐。这些真实痕迹在更改后不会填满，要结束，在“存储”后有一些空间。有什么方法可以修复它吗？提前感谢。好吧，在

nav>ul>li>a

li

中，li是

a

的父容器，

ul

是

li

的父容器。你应该勾选“css框模型”来真正理解这个概念。对于修复，你需要了解你正在设计的元素以及它的样式很难从屏幕截图中捕捉到它。尝试使用一些真正的代码。这不是最好的解决方案，但在跟踪那些垂直线时，菜单之间存在一些间隙。可能是我使用了错误的单词间距，不确定。在示例中，我删除了

单词间距

，因为它用于在一组单词中分隔单词（例如a

p

tag）。在我最后的评论中尝试jsbin示例（或者在回答中，它已更新）

  .nav {
        width: 1000px;
        height: 35px;
        background: #2F2929;
        position: relative;
        top: -13px;
    }
    .nav ul {
        list-style: none;
        padding-left: 0;
        text-align: center;
        word-spacing: 20px;
    }
    .nav ul li {
        border-right: 1px solid white;
        float: left;
    }
    .nav ul li ul {
        display: none;
    }
    .nav ul li:hover {
        background-color: blue;
    }
    .nav ul li:hover ul {
        background-color: red;
        display: block;
    }
    .nav ul li ul li {
        display: block;
        float: none;
    }
    .nav ul li a,
    .nav ul li:hover a {
        text-decoration: none;
        color: white;
        font-size: 14px;
        text-transform: uppercase;
        padding: 9px;
        display: block;
    }

<nav class="nav">
    <ul>
        <li>
            <a href="#">Link 1</a>
            <ul>
                <li>
                    <a href="#">Link 1</a>
                </li>
                <li>
                    <a href="#">Link 2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Link 2</a>
        </li>
        <li>
            <a href="#">Link 3</a>
        </li>
    </ul>
</nav>

<li>
   <a href="#">Link 1</a>
   <ul>
      <li>
         <a href="#">Link 1</a>
      </li>
      <li>
         <a href="#">Link 2</a>
      </li>
   </ul>
</li>

.nav ul li ul {
    display: none;
}

.nav ul li:hover ul {
    background-color: red;
    display: block;
}

.nav ul li {
            border-right: 1px solid white;
            float: left;
        }

.nav ul.has-sub:hover > li,
.nav ul li.has-sub:hover > div {
    background: #newcolor;
    border-color: #newcolor;
}

.nav ul li.has-sub:hover > ul,
.nav ul li.has-sub:hover > div {
    display: block;
}

.nav > ul > li.has-sub > a:hover,
.nav > ul > li.has-sub:hover > a {
    background: #newcolor;
    border-color: #newcolor;
}