html - 如何对齐CSS下拉菜单的包装

Question

我正在创建一个下拉菜单，它看起来很像我想要的样子，但我实现布局的方式使右侧的悬停区域有点太大，此处用灰色框表示。我希望将鼠标悬停在灰色框(.dropdown 元素)上以被视为白色区域并关闭下拉菜单。

当鼠标悬停在灰色的下拉区域上时，如何关闭菜单？

此处的工作演示:https://codepen.io/anon/pen/BMarBb?editors=1100

a {
  text-decoration: none;
}

nav {
  font-family: monospace;
  margin-left: 300px;
}

ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

li {
  color: #fff;
  background: darkorange;
  display: block;
  float: left;
  padding: 1rem;
  position: relative;
  text-decoration: none;
  transition-duration: 0.5s;
}

li a {
  color: #fff;
}

li:hover {
  cursor: pointer;
}

.dropdown {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease;
  margin-top: 1rem;
  left: 0;
  display: none;
  margin-left: 50%;
  background: silver;
}

li:hover .dropdown,
.dropdown:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

.dropdown li {
  clear: both;
  white-space: nowrap;
  background: none;
}

.wrapper {
  /*   background: green; */
  display: inline-block;
  margin-left: -50%;
  padding-top: 30px;
}

.inner {
  background: darkorange;
  display: inline-block;
  box-shadow: 12px 15px 45px 0 rgba(12, 0, 51, 0.2);
  border-radius: 4px;
}

.inner:before,
.inner:after,
.inner li:first-child:after {
  display: block;
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  left: -12px;
  border: 12px outset transparent;
  margin-top: 29px;
}

.inner:after {
  border-bottom: 12px solid darkorange;
  top: -23px;
}

<nav role="navigation">
  <ul>
    <li><a href="#">One</a>
      <ul class="dropdown dropdown1">
        <section class="wrapper">
          <section class="inner">
            <li><a href="#">Sub-A</a></li>
            <li><a href="#">Sub-B</a></li>
            <li><a href="#">Sub-C</a></li>
          </section>
        </section>
      </ul>
    </li>
    <li><a href="#">Two</a>
      <ul class="dropdown dropdown2">
        <section class="wrapper">
          <section class="inner">
            <li><a href="#">Sub-1</a></li>
            <li><a href="#">Sub-2</a></li>
            <li><a href="#">Sub-3</a></li>
          </section>
        </section>
      </ul>
    </li>
    <li><a href="#">Three</a></li>
  </ul>
</nav>

Answer 1

我对你的问题的解释是，当你停止将鼠标悬停在橙色部分上时，你希望下拉菜单隐藏。

我对你下面的代码所做的是 position:absolute 元素 left:50% 和 transform:translate(-50%)。这将使元素水平居中对齐，使橙色链接位于灰色区域之上。

a {
  text-decoration: none;
}

nav {
  font-family: monospace;
  margin-left: 300px;
}

ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

li {
  color: #fff;
  background: darkorange;
  display: block;
  float: left;
  padding: 1rem;
  position: relative;
  text-decoration: none;
  transition-duration: 0.5s;
}

li a {
  color: #fff;
}

li:hover {
  cursor: pointer;
}

.dropdown {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease;
  margin-top: 1rem;
  left: 50%;
  display: none;
  transform: translate(-50%);
  background: silver;
}

li:hover .dropdown,
.dropdown:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

.dropdown li {
  clear: both;
  white-space: nowrap;
  background: none;
}

.wrapper {
  /*   background: green; */
  display: inline-block;
  padding-top: 30px;
}

.inner {
  background: darkorange;
  display: inline-block;
  box-shadow: 12px 15px 45px 0 rgba(12, 0, 51, 0.2);
  border-radius: 4px;
}

.inner:before,
.inner:after,
.inner li:first-child:after {
  display: block;
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  border: 12px outset transparent;
  margin-top: 29px;
}

.inner:after {
  border-bottom: 12px solid darkorange;
  top: -23px;
}

<nav role="navigation">
  <ul>
    <li><a href="#">One</a>
      <ul class="dropdown dropdown1">
        <section class="wrapper">
          <section class="inner">
            <li><a href="#">Sub-A</a></li>
            <li><a href="#">Sub-B</a></li>
            <li><a href="#">Sub-C</a></li>
          </section>
        </section>
      </ul>
    </li>
    <li><a href="#">Two</a>
      <ul class="dropdown dropdown2">
        <section class="wrapper">
          <section class="inner">
            <li><a href="#">Sub-1</a></li>
            <li><a href="#">Sub-2</a></li>
            <li><a href="#">Sub-3</a></li>
          </section>
        </section>
      </ul>
    </li>
    <li><a href="#">Three</a></li>
  </ul>
</nav>