使用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>

UPDATE：这是我终于工作的代码。测试边缘，Chrome（PC /手机），Firefox，IE 10-11（IE10以下 - >祝你好运:)。 除了更新的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{ 
 
\t margin-top:15px 
 
} 
 

 
nav ul{ 
 
\t list-style:none; 
 
\t position:relative; 
 
\t float:left; 
 
\t 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{ 
 
\t display:block; 
 
\t color: #993; 
 
\t text-decoration:none; 
 
\t font-weight:700; 
 
\t font-size:12px; 
 
\t line-height:32px; 
 
\t padding:0 15px; 
 
\t font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif; 
 
    padding:10px; 
 
    border-radius:5px; 
 
    align-self:center; 
 
} 
 

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

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

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

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

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

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

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

 
nav ul li:hover > ul 
 
{ 
 
\t 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。我没有做小屏幕的版本，所以你自己仍然需要这样做。