导航栏元素悬停时出现问题

Question

当我将鼠标悬停在各个链接上时，更改颜色的部分并没有完全到达顶部。 我觉得比我现在正在做的事情有更好/更有效的方法。 如果有人可以帮助，那就太好了！

HTML：

<ul class="nav nav-blue">
    <li><a href="" class="nav-hdr">Nigel Silva</a></li>
    <li><a href="" class="el-b-1">Home</a></li>
    <li><a href="" class="el-b-2">About</a></li>
    <li><a href="" class="el-b-3">Work</a></li>
    <li><a href="" class="el-b-4">Clients</a></li>
    <li><a href="" class="el-b-5">Contact</a></li>
</ul>

CSS：

.nav-hdr {
  color: #FFF;
  font-size: 1.5em;
  position: relative;
  left: -27%;
  top: 5%;
}
.nav{
  list-style:none;
  margin:0 auto;
  padding:0;
  text-align:right;
  text-decoration: none;
  height: 55px;
}
.nav li{
  display:inline;
}
.nav a{
  display:inline-block;
  padding-right:15px;
  color: #000;
  margin-top: auto;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
}
.nav a:hover, .nav a:focus {
  color: #FFF;  
}
.nav-blue {
  background-color: #00aeef;
  margin: auto;
  width: 50%;
}
.nav-blue a {
  color: #FFF;
}
.el-b-1:hover, .el-b-1:focus, .el-b-2:hover, .el-b-2:focus, .el-b-3:hover, .el-b-3:focus,
.el-b-4:hover, .el-b-4:focus, .el-b-5:hover, .el-b-5:focus {
  background-color: #47cdff;
  margin-top: 8.5px;
  margin-bottom: 8.5px;
}
.el-b-1:active, .el-b-2:active, .el-b-3:active, .el-b-4:active, .el-b-5:active {
  background-color: #0b8aba;
}

Answer 1

添加vertical-align: top; .nav a并删除margin-top: 8.5px;

Answer 2

最快的修复方法是以下代码：

将此添加到.css：

.nav li:hover{
    background:#47cdff;
    padding-top:7px;
    padding-bottom:31px;
}

从您的CSS删除此：

.el-b-1:hover, .el-b-1:focus, .el-b-2:hover, .el-b-2:focus, .el-b-3:hover, .el-b-3:focus,
.el-b-4:hover, .el-b-4:focus, .el-b-5:hover, .el-b-5:focus {
  background-color: #47cdff;
  margin-top: 8.5px;
  margin-bottom: 8.5px;
}

当然，有很多方法可以做这种事情。

Answer 3

这是使用display: table和display: table-cell 。

• 导航用以下内容包装在<header> display: table

• 第一个链接从导航中删除，放在其前面并display: table-cell和导航。 这样可以确保它们都在同一条线上。

• 导航中的链接display: inline-block ，并通过使用line-height: 3em居中。 该行高控制整个标题的高度。

• 当屏幕尺寸变得太小时，@ media查询CSS进入，菜单项折叠成一个下拉菜单。

• 折叠后， a.menu:hover + .menu-items直接在菜单按钮之后定位菜单项div。

演示版

1. “运行代码段”并全屏打开演示。

2. 缩小窗口的宽度，然后看到菜单折叠成一个下拉菜单。

 * { margin: 0; padding: 0; } header { background-color: #00aeef; margin: 0 auto; width: 50%; display: table; } .nav-hdr { color: #FFF; font-size: 1.5em; display: table-cell; vertical-align: middle; padding: 0 10px; white-space: nowrap; text-decoration: none; } .nav { text-align: right; text-decoration: none; display: table-cell; padding: 0 0 0 1em; vertical-align: top; position: relative; min-width: 300px; /* Prevent shrinking too small */ background-color: #00aeef; } .nav a { display: inline-block; line-height: 3em; padding: 0 0.5em; cursor: pointer; text-decoration: none; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; color: #FFF; white-space: nowrap; } .nav a:last-child { padding-right: 1em; /* Last child gets a little extra padding on the right */ } .nav a:hover, .nav-hdr:hover { background-color: #0b8aba; } .nav a:active, .nav-hdr:active { background-color: #47cdff; } /*Hide collapsed menu display link*/ a.menu { display: none; } /* When the screen size gets too small, collapse the links into a dropdown */ @media screen and (max-width: 450px) { .nav { min-width: 0; position: relative; } .nav .menu-items { display: none; } a.menu { display: inline-block; } a.menu:hover + .menu-items, .menu-items:hover { display: block; position: absolute; top: 3em; right: 0; background: #000; } .menu-items a { display: block; text-align: left; } } 

 <header> <a href="" class="nav-hdr">Nigel Silva</a> <nav class="nav"> <a class="menu">Menu (hover me)</a> <div class="menu-items"> <a href="" class="el-b-1">Home</a><a href="" class="el-b-2">About</a><a href="" class="el-b-3">Work</a><a href="" class="el-b-4">Clients</a><a href="" class="el-b-5">Contact</a> </div> </nav> </header>