悬停属性工作不正常

我不知道我在做什么不正确，但悬停不按我想要的。正如你所看到的，当把光标放在任何菜单上时，它的背景看起来很奇怪。我不想复制任何内容，但我的意图是执行相同的操作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; 
}

来源

2015-11-25 Tiago Machado Paiva

背景应该是背景颜色首先关闭 –

发表您的HTML。 –

满额加价会有帮助 – JesseEarley

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

来源

2015-11-25 18:36:17 juanmnl

你是对的，我的朋友。你介意解释这一部分：“你的李不是其父母的高度。”？我不明白。抱歉。你的代码非常好，但是悬停和新闻左侧（和Store的右侧）之间有一个空格。有什么方法可以解决它吗？ JesseEarley也创建了一个代码，菜单中有垂直的白色痕迹，如何在代码中做到这一点？在此先感谢 –

看看这个：菜单不居中对齐。那些跟踪改变后的痕迹并不完整，并且在“存储”之后还有一些空间。有什么方法可以解决它吗？预先感谢 –

那么，在'nav> ul> li> a''里是'a'的父容器，'ul'是''''的父容器。你应该检查'CSS框模型'来真正理解这个概念。对于修复，您需要了解您正在设计哪个元素，并且很难从截图中捕捉到它。尝试使用一些真实的代码。这不是最好的解决方案，但[当可以做什么]（http://jsbin.com/nemoxu/edit?html,css,output） – juanmnl

给这个一杆。

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

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

来源

2015-11-25 18:59:24

[URL = http：//s1356.photobucket.com/user/tiago1801/media/Screenshot_9_zpsn8oik0ut.png.html] 当我输入时，您的代码无法正常工作。我做错了吗？ –

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

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

既然你想要一个分界线父列表项，我添加了一个border-right to them

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

来源

2015-11-25 19:07:00 JesseEarley

非常感谢。正是我想要做的。与此同时，代码的其他部分变得疯狂lol –

请介绍一下所有的选择器吗？ –

是的，对不起，我使用Visual Studio格式化代码，当然，我不确定复制/粘贴HTML时发生了什么。现在编辑我的答案以包含解释。 – JesseEarley

可以试试这个。

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

来源

2015-11-25 19:11:45

悬停属性工作不正常

回答

相关问题