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查询会启动，菜单项会折叠成下拉列表。
折叠后，a.menu:hover + .menu-items会在菜单按钮后直接定位菜单项div。

演示

“运行代码段”并打开演示全屏。
缩小窗口宽度，看到菜单折叠到下拉列表中。

* {
  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>

导航栏元素悬停的麻烦

3 个答案:

演示