使用css flexbox并且没有jquery的响应式下拉导航

Question

我正在使用仅使用css且没有jQuery的下拉列表构建响应式菜单。 Flexbox的新手，并努力使下拉列表正确对齐。下面的代码工作，除了下拉的东西将会错位 - 尝试使用标准的东西，如position：relative。

我正在使用复选框（.toggle）来显示/隐藏汉堡包。 希望得到一些指示。

这是我的代码:(也是JSFiddle here）

  nav {
      margin:0 auto;
      max-width:700px;
      width:100%;
    }
    
    .menu {background:#28303a;padding:0;margin:0;max-width:700px;height:50px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      list-style-type: none; 
    }
    
    .menu li a {padding:10px;border-radius:5px;align-self:center;}
    .menu li a:hover { background: #0093bb;}
    
    #checkbox1,.toggle { display: none;}
    
    /* handle smaller screens here */
    @media screen and (max-width: 550px) {
    
      .menu {
        flex-direction: column;
        height: 0px;
      }
      .menu li {
        display: flex;
        align-self: center;
        width:100%;
         /* hide until user clicks on hamburger */
        opacity: 0;
        visibility: hidden;
      }
      .menu li a {
        width: 100%;
        text-align: center;
        align-self: center;
        align-content: center;
      }
    
    .toggle {
        color:#fff;
        clear: both;
        display: block;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
        width: 100%;
        height: 40px;
      }
      
      .toggle:hover {
        background: #0093bb;
      }
      #checkbox1:checked + label .menu li {
        /* show menu - user clicked on hamburger */
        opacity: 1;
        visibility: visible;
      }
    
      #checkbox1:checked + label .menu {
        height: 200px;
      }
    }
    
    
    /* standard */
    body {font-family: 'Open Sans';font-size:15px}
    a{text-decoration:none;color:#fff}
    .container {background:#28303a;}

<div class="container">
       <nav>
       <input type="checkbox" id="checkbox1" />
       <label for="checkbox1">
       
       <ul class="menu">
          <li><a href="#">Home</a></li>
          <li><a href="#">Sub items 1</a>
          <!-- sub items below / this won't work:
             <ul class="menu"> 
                <li><a href="#">Sub 1a</a></li>
                <li><a href="#">Sub 1b</a></li>
             </ul>
          -->
          <li><a href="#">Sub items 2</a></li>
          <li><a href="#">Contact</a></li>
       </ul>
   
       <span class="toggle">☰</span>
       
       </label>
       </nav>
 </div>

更新：这是我终于开始工作的代码。测试Edge，Chrome（个人电脑/手机），Firefox，IE 10-11（IE10以下 - ＆gt;祝你好运:)。 除了更新的CSS之外，我还将<ul class="menu">内容移到了<label for...>之外，因为旧代码不符合W3C标准。

/* standard */
 body {font-family: 'Open Sans';font-size:15px}
 a {text-decoration:none;color:#fff}

/* code for responsive css dropdown starts here: */
.container {
    background: #28303a;
    padding-bottom: 10px;
    display: flex;
    justify-content: center;
}

nav {
    box-sizing: border-box;
    background: #28303a;
    margin: 0;
    padding: 0;
}

    nav label {
        padding: 0;
        margin: 0
    }

    nav ul {
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: row;
    }

    nav li {
        list-style-type: none;
        padding:0 10px;
        margin:0;
        font-size:16px;
        line-height:16px;
    }

    nav a, #checkbox1, .toggle {
        font-size: 16px;
        color: #fff;
        width: 100%;
        display: block;
        line-height: 16px;
    }

    /* hide sub menu initially */
    nav > ul > li ul {
        display: none;
    }

    /* show sub menu on parent hover */
    nav > ul > li:hover ul {
        display: block;
        background: #28303a
    }

    /* position sub menu */
    ul ul {
        position: absolute;
    }

    ul ul > li {
        padding: 5px 8px;
    }

/* toggle button hidden initially */
    #checkbox1, .toggle {
        display:none; 
    }

@media screen and (max-width:768px) {
    
    nav {
        width: 100%
    }

    nav ul {
        flex-direction: column;
    }

    nav > ul > li {
        justify-content: center;
        text-align: center;
        align-items: center;
        align-content: center;
        width: 100%;
        padding:0;
        height:0; /* set height to 0 so the menu won't take up space, until toggle=open*/
        opacity:0;
        visibility: hidden;
    }

    /* position sub menu */
    ul ul {
        position: relative
    }
    /* remove padding from sub menu items */
    ul ul > li {
        padding:0;
    }

    /* set padding for all a elements */
    nav a {
        padding: 3px 0;
    }

    nav a:hover {
        background: #0093bb;
    }

    .toggle {
        color: #fff;
        clear: both;
        display: block;
        text-align: center;
        cursor: pointer;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .toggle:hover {
        background: #0093bb;
    }

    /* show menu - user clicked on hamburger */
    #checkbox1:checked + label + ul.menu > li {
        opacity: 1;
        visibility: visible;
        height: auto;
    }
}

<div class="container">
           <nav>
           <input type="checkbox" id="checkbox1" />
           <label for="checkbox1"><span class="toggle">&equiv;</span></label>
           
           <ul class="menu">
              <li><a href="#">Home</a></li>
              <li><a href="#">Sub items 1</a>
              <ul> 
                    <li><a href="#">Sub 1a</a></li>
                    <li><a href="#">Sub 1b</a></li>
              </ul>
              <li><a href="#">Sub items 2</a>
              <ul> 
                    <li><a href="#">Sub 2a</a></li>
                    <li><a href="#">Sub 2b</a></li>
                    <li><a href="#">Sub 3c</a></li>
              </ul>
              
              </li>
              <li><a href="#">Contact</a></li>
           </ul>
           </nav>
     </div>

Answer 1

我没有使用.toggle，我只使用嵌套列表和css。

nav{
	margin-top:15px
}

nav ul{
	list-style:none;
	position:relative;
	float:left;
	margin:0;
  max-width:700px;
  width:100%;
  background:#28303a;
  height:50px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center; 
}

nav ul a{
	display:block;
	color: #993;
	text-decoration:none;
	font-weight:700;
	font-size:12px;
	line-height:32px;
	padding:0 15px;
	font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
  padding:10px;
  border-radius:5px;
  align-self:center;
}

nav ul li{
	position:relative;
	float:left;
	margin:0;
	padding:0
}

nav ul li.current-menu-item{
	background:#ddd
}

nav ul li:hover{
  background: #0093bb;
}

nav ul ul{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	padding:0
}

nav ul ul li{
	float:none;
	width:200px
}

nav ul ul a{
	line-height:120%;
	padding:10px 15px
}

nav ul ul ul
{
	top:0;
	left:100%
}

nav ul li:hover > ul
{
	display:block
}

/* standard */
body {
  font-family: 'Open Sans';
  font-size:15px
}
a{
  text-decoration:none;
  color:#fff;
}

<nav id="nav">
  <ul>
    <li class="current-menu-item"><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a>
      <ul>
        <li><a href="#">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 2</a></li>
        <li><a href="#">Sub Menu 3</a></li>
        <li><a href="#">Sub Menu 4</a>
          <ul>
            <li><a href="#">Sub Sub Menu 1</a></li>
            <li><a href="#">Sub Sub Menu 2</a></li>
          </ul>
        </li>
        <li><a href="#">Sub Menu 5</a></li>
      </ul>
    </li>

    <li><a href="#">Menu 2</a>
      <ul>
        <li><a href="#">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 2</a></li>
        <li><a href="#">Sub Menu 3</a></li>
      </ul>
    </li>

    <li><a href="#">Menu 3</a>
      <ul>
        <li><a href="#">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 2</a>
          <ul>
            <li><a href="#">Sub Sub Menu 1</a></li>
            <li><a href="#">Sub Sub Menu 2</a></li>
          </ul>
      </ul>
      </li>
      <li><a href="#">Menu 4</a></li>
      <li><a href="#">Contact</a></li>
  </ul>
</nav>

这是Codepen。 PS。我没有为较小的屏幕做版本，所以你仍然需要自己做。