带有 collapse/hide 选项的纯 CSS 下拉菜单

Question

我正在尝试向网站插入纯 CSS 下拉响应菜单。菜单很简单，带有一些额外的样式编码。但令我困扰的是，当打开下拉标签时，会出现下拉子菜单，但如果我单击其他任何地方或菜单中的另一个标签，它不会消失。我试图在用鼠标或手指（在触摸屏上）点击其他任何地方后打开下拉子菜单时，这个子菜单会折叠回来。尝试使用 :focus 但似乎没有任何效果。

我肯定需要一些帮助。谢谢你。这是代码：

.nav-bar {
    background: #f8f8f8;
    width: 100%;
}

.nav-bar__label {
    color: #505050;
    display: block;
    padding: 10px 0;
    text-align: center;
    text-transform: uppercase;
    width: inherit;
}

.nav-bar__label::after,
.nav-bar__sub-label::after {
    content: " +";
}

.nav-bar__label,
.nav-bar__sub-label {
    cursor: pointer;
 
}

.nav-bar__list {
    background: #f8f8f8;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.nav-bar__list,
[id^="toggle"] {
    display: none;

}

[id^="toggle"]:checked + .nav-bar__list {
    display: block;
}

    /* DRUGI LIST */

.nav-bar__list2 {
    background: #f8f8f8;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 300px;
}

.nav-bar__list2,
[id^="toggle"] {
    display: none;
}

[id^="toggle"]:checked + .nav-bar__list2 {
    display: block;
}

    /* KONEC DRUGEGA LISTA */


.nav-bar__list-item {
    display: block;
}

.nav-bar__link,
.nav-bar__sub-label {
    color: #505050;
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    word-wrap: break-word;
}

.nav-bar__list-item .nav-bar__list-item .nav-bar__link,
.nav-bar__list-item .nav-bar__list-item .nav-bar__sub-label {
    padding: 10px 10px 10px 30px;
}

.nav-bar__link:hover,
.nav-bar__link:active,
.nav-bar__sub-label:hover {
    background: #cc0000;
 color: #fff;
}


@media all and (min-width : 992px) {
    .nav-bar > .nav-bar__label {
        display: none;
    }

    .nav-bar > .nav-bar__list {
        display: block;
    }

    .nav-bar > .nav-bar__list > .nav-bar__list-item {
        display: inline-block;
        position: relative;
    }

    .nav-bar__list-item .nav-bar__list {
        position: absolute;
    }
 
 /* DRUGI LIST */
 
    .nav-bar > .nav-bar__list2 {
        display: block;
    }

    .nav-bar > .nav-bar__list2 > .nav-bar__list-item {
        display: inline-block;
        position: relative;
    }

    .nav-bar__list-item .nav-bar__list2 {
        position: absolute;
    }

    .nav-bar__list-item .nav-bar__list-item .nav-bar__link,
    .nav-bar__list-item .nav-bar__list-item .nav-bar__sub-label {
        padding: 10px 20px;
    }
}

    <html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Menu</title>

    <link rel="stylesheet" href="css/responsive-menu.css">
</head>
<body>
    <nav class="nav-bar">
        <label for="toggle" class="nav-bar__label">Menu</label>
        <input type="checkbox" id="toggle" class="nav-bar__toggle">
        <ul class="nav-bar__list">
            <li class="nav-bar__list-item">
                <a href="#" class="nav-bar__link">Menu Item 1</a>
            </li>
            <li class="nav-bar__list-item">
                <a href="#" class="nav-bar__link">Menu Item 2</a>
            </li>
            <li class="nav-bar__list-item">
                <a href="#" class="nav-bar__link">Menu Item 3</a>
            </li>
            <li class="nav-bar__list-item">
                <label for="toggle-sub-1" class="nav-bar__sub-label">Menu Item 4</label>
                <input type="checkbox" id="toggle-sub-1" class="nav-bar__toggle">
                <ul class="nav-bar__list2">
                    <li class="nav-bar__list-item">
                        <a href="#" class="nav-bar__link">Menu Item 4.1</a>
                    </li>
                    <li class="nav-bar__list-item">
                        <a href="#" class="nav-bar__link">Menu Item 4.2</a>
                    </li>
                    <li class="nav-bar__list-item">
                        <a href="#" class="nav-bar__link">Menu Item 4.3</a>
                    </li>
                </ul>
            </li>
            <li class="nav-bar__list-item">
                <a href="#" class="nav-bar__link">Menu Item 5</a>
            </li>
        </ul>
    </nav>
    
</body>
</html>

Answer 1

使用悬停的解决方案:

利用移动浏览器中 :hover 的类似焦点状态 - 诀窍是将鼠标悬停在将始终被视为 "hovered" 的祖先上，而子级中的任何地方也是如此.非常干净，语义正确。查看 fiddle

html,
body {
  height: 100%;
  width: 100%;
  background: #FFF;
}

* {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}

p {
  padding: 1.6em 0 0;
}

.pretendthisisthebody {
  padding: 50px 10px 0;
}

#hideholder {
  display: none;
}

.radionav {
  position: absolute;
  top: 0;
  left: 0;
  background: #f8f8f8;
  width: 100%;
}

.radionav>div {
  text-align: center;
  text-transform: uppercase;
}

.radionav div,
.radionav a {
  color: #505050;
  display: block;
  padding: 10px;
  width: 100%;
  cursor: pointer;
  text-decoration: none;
  transition: 0.1s all ease-in-out;
}

.radionav li:hover>div{
  background: #cc0000;
  color: #fff;
}

.radionav ul {
  list-style-type: none;
  background: #f8f8f8;
}

.radionav ul ul a {
  padding-left: 30px;
}

.radionav input,
.radionav .closer,
.radionav ul,
.radionav input:checked ~ .opener {
  display: none;
}

.radionav:hover>ul,
.radionav li:hover>ul {
  display: block;
}

.radionav div::after {
  content: " +";
}

@media all and (min-width: 481px) {
  .radionav>div {
    display: none !important;
  }
  .radionav>ul
  {
    display: block !important;
  }
  .radionav>ul>li {
    display: inline-block;
  }
  .radionav a,
  .radionav div {
    width: auto;
  }
  .radionav li {
    position: relative;
  }
  .radionav a:hover {
    background: #cc0000;
    color: #fff;
  }
  .radionav ul ul {
    position: absolute;
    top: 100%;
    left: 0;
  }
  .radionav ul ul li {
    display: block;
    min-width: 100%;
  }
  .radionav ul ul a {
    padding-left: 10px;
    white-space: nowrap;
  }
  .radionav li:hover>ul {
    display: block;
  }
  .radionav div::after {
    content: "";
  }
}

<div class="pretendthisisthebody">
  <nav class="radionav">
    <div>Menu</div>
    <ul>
      <li><a href="#">Menu item 0</a></li>
      <li>
        <div>Menu item 1</div>
        <ul>
          <li><a href="#">Just a link</a></li>
          <li><a href="#">Just a longer link</a></li>
          <li><a href="#">Just a link</a></li>
        </ul>
      </li>
      <li><a href="#">Menu item 2</a></li>
      <li><a href="#">Menu item 3</a></li>
      <li>
        <div>Menu item 4</div>
        <ul>
          <li><a href="#">Just a link</a></li>
          <li><a href="#">Just a longer link</a></li>
          <li><a href="#fail">Just a link</a></li>
        </ul>
      </li>
      <li><a href="#">Menu item 5</a></li>
    </ul>
  </nav>

  <h1>Clicking in the body outside the menu will hide it</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit aliquam suscipit. Vivamus ac mi tellus. Donec vulputate sem eu justo ornare, at mattis augue tempor. Nullam fringilla odio lobortis bibendum lobortis. Fusce condimentum ultricies
    nulla, non posuere sem vestibulum nec. Duis rhoncus velit lobortis odio interdum, quis aliquam ex dapibus. Quisque hendrerit pellentesque turpis non pretium. Nam ante metus, tempus quis tortor lacinia, efficitur ullamcorper erat. Sed at aliquet
    nisi, ac congue massa.</p>
  <p>Mauris est odio, tempor in ex ac, cursus iaculis ex. Etiam eu dapibus dolor. Quisque sodales mollis neque fringilla maximus. Praesent malesuada vitae elit eu congue. Mauris fringilla maximus arcu sit amet tempor. Nam sagittis lectus massa, eu viverra
    enim congue a. Nunc ultrices sapien nec enim auctor, ac placerat velit posuere. Donec velit ex, consectetur vitae sapien eget, eleifend maximus sem. Sed placerat nibh mi, eget fermentum justo ultrices nec.</p>
</div>

较早的解决方案：此菜单使用简单的单选按钮驱动的可折叠菜单，但将所有内容包装在 <label> 标记中以支持 "blur-like" 行为。简单版本是 here and the multi-level version with similar styles to the OP is here

Answer 2

这是我 css 的最终菜单。谢谢@Randy Hall

<style type="text/css"><!--
html,
body {
  height: 100%;
  width: 100%;
  background: #FFF;
}

* {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}

p {
  padding: 1.6em 0 0;
}

.pretendthisisthebody {
  padding: 50px 10px 0;
}

#hideholder {
  display: none;
}
.radionav {
  position: relative;
  top: 0;
  left: 0;
  background: #007de7;
  width: 100%;
  font-weight:400;
}

.radionav>div {
  text-align: center;
  text-transform: uppercase;
}

.radionav div,
.radionav a {
  color: #fff;
  display: block;
  padding: 10px;
  width: 100%;
  cursor: pointer;
  text-decoration: none;
  transition: 0.1s all ease-in-out;
}

.radionav li:hover>div,
.radionav a:hover {
  background: #cc0000;
  color: #fff;
}

.radionav ul {
  list-style-type: none;
  background: #007de7;
  margin-bottom: 0px !important;
}

.radionav ul ul a {
  padding-left: 30px;
}

.radionav input,
.radionav .closer,
.radionav ul,
.radionav input:checked ~ .opener {
  display: none;
}

.radionav:hover>ul,
.radionav li:hover>ul {
  display: block;
}

.radionav div::after {
  content: " +";
}

@media all and (min-width: 481px) {
  .radionav>div {
    display: none !important;
  }
  .radionav>ul
  {
    display: block !important;
  }
  .radionav>ul>li {
    display: inline-block;
  }
  .radionav a,
  .radionav div {
    width: auto;
  }
  .radionav li {
    position: relative;
  }
  .radionav ul ul {
    position: absolute;
    top: 100%;
    left: 0;
  }
  .radionav ul ul li {
    display: block;
    min-width: 100%;
  }
  .radionav ul ul a {
    padding-left: 10px;
    white-space: nowrap;
  }
  .radionav li:hover>ul {
    display: block;
  }
  .radionav div::after {
    content: "";
  }
} 

--></style>

<div class="pretendthisisthebody">

<!-- MODRI MENI -->
<nav class="radionav">
    <div>Meni</div>
    <ul>
      <li><a href="#">Home</a></li>
      <li>
        <div>Main menu 2</div>
        <ul>
<li><a href="#" class="nav-bar__link">Menu item 1 long</a></li>
<li><a href="#" class="nav-bar__link">Menu item 2</a></li>
<li><a href="#" class="nav-bar__link">Menu item 3</a></li>
<li><a href="#" class="nav-bar__link">Menu item 4</a></li>
<li><a href="#" class="nav-bar__link">Menu item 5 - extra long item</a></li>
<li><a href="#" class="nav-bar__link">Menu item 6</a></li>
<li><a href="#" class="nav-bar__link">Menu item 7</a></li>
<li><a href="#" class="nav-bar__link">Menu item 8</a></li>
<li><a href="#" class="nav-bar__link">Menu item 9</a></li>
<li><a href="#" class="nav-bar__link">Menu item 10</a></li>        </ul>
      </li>
      <li><a href="#">Main menu 3</a></li>
      <li>
        <div>Main manu 4</div>
        <ul>
   <li><a href="#" class="nav-bar__link">Menu item 1</a></li>
   <li><a href="#" class="nav-bar__link">Menu item 2 - with very long title</a></li>
        </ul>
      </li>
      <li><a href="#">Ouyeah menu</a></li>
       <li><a href="#">News</a></li>
       <li><a href="#">About us</a></li>
       <li><a href="#">Contact item</a></li>

    </ul>
  </nav>
<!-- KONEC MODREGA MENIJA -->
<h1>Clicking in the body outside the menu will hide it</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit aliquam suscipit. Vivamus ac mi tellus. Donec vulputate sem eu justo ornare, at mattis augue tempor. Nullam fringilla odio lobortis bibendum lobortis. Fusce condimentum ultricies
    nulla, non posuere sem vestibulum nec. Duis rhoncus velit lobortis odio interdum, quis aliquam ex dapibus. Quisque hendrerit pellentesque turpis non pretium. Nam ante metus, tempus quis tortor lacinia, efficitur ullamcorper erat. Sed at aliquet
    nisi, ac congue massa.</p>
  <p>Mauris est odio, tempor in ex ac, cursus iaculis ex. Etiam eu dapibus dolor. Quisque sodales mollis neque fringilla maximus. Praesent malesuada vitae elit eu congue. Mauris fringilla maximus arcu sit amet tempor. Nam sagittis lectus massa, eu viverra
    enim congue a. Nunc ultrices sapien nec enim auctor, ac placerat velit posuere. Donec velit ex, consectetur vitae sapien eget, eleifend maximus sem. Sed placerat nibh mi, eget fermentum justo ultrices nec.</p>
</div>

带有 collapse/hide 选项的纯 CSS 下拉菜单

Pure CSS dropdown menu with collapse/hide option

css

menu

drop-down-menu

responsive