Question

我不知道如何在移动设备的导航栏区域外单击时再次隐藏导航栏列表项，因为它将鼠标悬停在桌面上。它可以用于移动设备，例如iOS和Android。以下是导航栏的CodePen：https://codepen.io/Macast/pen/ooKqpx。任何帮助将不胜感激！谢谢。

HTML：

<nav>
  <div id="logo">
    <img src="images/J.-Freeman-&-Son-Landscape-Logo.png">
  </div>

  <label for="drop" class="toggle">Menu</label>
  <input type="checkbox" id="drop" />
  <ul class="menu">
    <li><a href="home.html">Home</a></li>
    <li>
      <!-- First Tier Drop Down -->
      <label for="drop-1" class="toggle">About Us +</label>
      <a href="#">About Us</a>
      <input type="checkbox" id="drop-1" />
      <ul>
        <li><a href="#">History</a></li>
        <li><a href="#">Our Services</a></li>
        <li><a href="#">Our Aim</a></li>
      </ul>

    </li>
    <li>
      <!-- First Tier Drop Down -->
      <label for="drop-2" class="toggle">Useful Information +</label>
      <a href="#">Useful Information</a>
      <input type="checkbox" id="drop-2" />
      <ul>
        <li><a href="html/usefulInfo/arrangingTheFuneral.html">Arranging the Funeral</a></li>
        <li><a href="html/usefulInfo/funeralCosts.html">Help with Funeral Costs</a></li>
        <li><a href="html/usefulInfo/timesOfBereavement.html">In Times of Bereavement</a></li>
        <li><a href="html/usefulInfo/howToRegisterDeath.html">How to Register a Death</a></li>
        <li><a href="html/usefulInfo/peopleToContact.html">People You May Need to Contact</a></li>
        <li><a href="html/usefulInfo/obtainProbate.html">How to Obtain Probate</a></li>
        <li><a href="html/usefulInfo/funeralService.html">The Funeral Service</a></li>
        <li><a href="html/usefulInfo/afterFuneralService.html">After the Funeral Service</a></li>
      </ul>
    </li>
    <li><a href="html/contact.html">Contact</a></li>
  </ul>
</nav>

CSS：

.toggle,
[id^="drop"] {
  display: none;
}
/* Giving a background-color to the nav container. */

nav {
  margin: 0;
  padding: 0;
  background-color: #254441;
}
/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
  content: "";
  display: table;
  clear: both;
}
/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */

nav ul {
  /*float: right;*/
  text-align: center;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}
/* Positioning the navigation items inline */

nav ul li {
  margin: 0px;
  display: inline-block;
  background-color: #254441;
  text-align: center;
  position: relative;
  z-index: 200; /* Link items will stay above all over content, including Google Map */
}
/* Styling the links */

nav a {
  display: block;
  padding: 14px 20px;
  color: #fff;
  font-size: 17px;
  text-decoration: none;
  text-align: center;
}
nav ul li ul li:hover {
  background: #000000;
}
/* Background color change on Hover */

nav a:hover {
  background-color: #000000;
}
/* Hide Dropdowns by Default
 * and giving it a position of absolute */

nav ul ul {
  display: none;
  position: absolute;
  /* has to be the same number as the "line-height" of "nav a" */
  top: 60px;
  left: 0;
  right: 0;
}
/* Display Dropdowns on Hover */

nav ul li:hover > ul {
  display: inherit;
}
/* Fisrt Tier Dropdown */

nav ul ul li {
  /*width: 170px;*/
  float: none;
  display: list-item;
  position: relative;
  text-align: center;
}
/* Second, Third and more Tiers 
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/

nav ul ul ul li {
  position: relative;
  top: -60px;
  /* has to be the same number as the "width" of "nav ul ul li" */

  left: 200px;
}
/* Change ' +' in order to change the Dropdown symbol */

li > a:after {
  content: " +";
}
li > a:only-child:after {
  content: "";
}

Answer 1

尝试同时使用：hover和：focus。焦点将允许移动用户触摸导航栏以显示内容，并触摸导航栏以隐藏内容。但是，您需要保持桌面用户的悬停状态。我在codepen的第72行添加了这行代码，它似乎在移动视图中工作。

nav ul li:hover > ul,
nav ul li:focus > ul {
  display: inherit;
}

导航栏单击关闭 - 隐藏列表项

1 个答案: