Question

我不确定我做错了什么但悬停不能按我的意愿行事。如您所见，当将光标放在任何菜单上时，其背景看起来很奇怪。我不想复制任何东西，但我的意图是和http://www.nfl.com/上的一样。只要将光标放在任何菜单上，就会激活完整的背景蓝色并将颜色名称更改为白色。要完成，每个菜单后面都有垂直条。我不知道该怎么做

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;
}

Answer 1

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

让你成为mock in jsbin

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<nav class="nav">
  <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</nav>
</body>
</html>

CSS

.nav {
    width: 100%;
    height: 35px;
    background: #2F2929; 
    position: relative;
}

.nav ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

.nav ul li {
    display: inline-block;
    cursor: pointer;
    padding: 8px;
    float: left;
    border-right: 1px solid #fff;
}

.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;
}

Answer 2

给它一个机会。

＆＃13;

.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 a {
display:inline-block;
text-decoration: none;
color: white;
font-size: 14px;
font-family: "Georgia", serif;
text-transform: uppercase;
}

.nav ul li a:hover {
background: #585454;
color: red;
}

＆＃13;

<nav class="nav">
   <ul>
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
   </ul>
</nav>

＆＃13;

Answer 3

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

https://jsfiddle.net/97j5k037/1/

  .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>

此CSS将隐藏子菜单，因为您不希望它默认显示

.nav ul li ul {
    display: none;
}

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

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

由于你想要一个分隔父列表项的行，我为它们添加了一个右边界

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

Answer 4

可以尝试一下。

.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;
}

悬停属性不能正常工作

4 个答案: