css - 与特定的导航菜单设计作斗争

Question

我正在尝试以特定样式制作导航菜单，它需要是一堆方形按钮/列表项，然后当您将鼠标悬停在某个元素上时，该元素后面的背景会改变颜色，上方有一个合适的高度元素和下拉列表后面，如下图所示。

我的问题是，我很好奇我是否以最有效的方式执行此操作，并且当我将鼠标悬停在初始元素上时，它正在工作，但随后您转到下拉元素之一，主/父元素消失进入后台。

代码:

body {
  background-color: #00aeef;
}
.navBG {
  background-color: #fff;
}
nav {
  padding-top: 100px;
  padding-left: 100px;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  text-align: center;
}
li {
  display: inline-block;
  display: inline;
  float: left;
  background-color: #00aeef;
  border: solid 4px #fff;
  width: 150px;
}
li a {
  display: block;
  padding: 10px 5px;
  color: #fff;
  text-align: center;
}
li a:hover {
  color: #fff;
  border: solid 4px #00ee98;
  border-top: solid 100px #00ee98;
  margin-top: -100px;
}
.droplinks {
  position: absolute;
  background-color: #00aeef;
  min-width: 150px;
  display: none;
  margin-left: -2px;
}
.droplinks a {
  padding: 10px;
  display: block;
  border: solid 2px #00ee98;
}
.droplinks a:hover {
  color: #fff;
}
.dropbutton:hover .droplinks {
  display: block;
}

<div class="container-fluid navBG">
  <nav>
    <ul>
      <li><a href="">Home</a>
      </li>
      <li class="dropbutton"><a href="">Products</a>
        <div class="droplinks">
          <a href="">Widgets</a>
          <a href="">Cogs</a>
          <a href="">Gears</a>
        </div>
      </li>
      <li class="dropbutton">
        <a href="">Services</a>
        <div class="droplinks">
          <a href="">Handshakes</a>
          <a href="">Winks</a>
          <a href="">Smiles</a>
        </div>
      </li>
      <li><a href="">Shop</a>
      </li>
      <li><a href="">Contact</a>
      </li>
    </ul>
  </nav>
</div>

然后将鼠标悬停在菜单项上，它会更改为此；

但是，当我转到子菜单项时，顶级元素会出现困惑，如上面的示例所示。可以解决这个问题吗？

Answer 1

看看这个fiddle , 以下是如何在将鼠标悬停在菜单项上时正确显示子菜单:

li:hover .droplinks{ 
  display: block;
}