css3轉換不觸發切換按鈕

Question

這是我第二個問題！ 我也在問題中搜索，但沒有任何幫助。 我有一個轉換問題。我試圖在移動視圖上選中切換按鈕時將300ms轉換應用到菜單;我在班級菜單中徒然嘗試了負面的價值觀。現在，這樣做菜單向上滑動，但我希望它滑下來，似乎沒有任何幫助。我也嘗試過使用z-index，但似乎沒有任何工作。 我真的不知道該怎麼做。任何幫助，可以送我正確的方向將不勝感激！

<!-- === MENUTOGGLE === --> 
<input type="checkbox" name="checkbox" id="menuToggle" value="value"> 
<label for="menuToggle" class="menu-icon">&#9776;</label> 
<!-- ==== HEADER ==== -->  
<header> 
<div id="logo" class="brand"> 
    <h1><img src="images/logo.png" alt="Hello"></h1> 
</div>`enter code here` 
    <nav class="menu"> 
     <ul> 
      <li><a href="#">Work</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Blog </a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </nav> 
</header> 

---

* { 
    margin: 0; 
    padding: 0; 
    outline: none; 
    box-sizing: border-box; 
} 
body { 
    background: #eee; 
    color: #444; 
    -webkit-font-smoothing: antialiased; 
    font-family: Arial, sans-serif; 
    font-weight: 400; 
    height: auto !important; 
    height: 100%; 
    min-height: 100%; 
    text-rendering: optimizeLegibility; 
} 
header { 
    display: block; 
    background-color: #FFF; 
    height: inherit; 
} 
nav { 
    text-align: center; 
    line-height: 3.5em; 
} 
nav ul { 
    background-color: rgba(255, 255, 255, 0.15); 
    float: none; 
    line-height: inherit; 
    margin: 0; 
} 
nav ul li { 
    display: block; 
    list-style-type: none; 
} 
nav ul li:hover { 
    background-color: #ededed; 
} 
nav ul li a { 
    text-decoration: none; 
    color: #313131; 
} 
nav ul li a:hover { 
    color: #b9b5b5; 
} 
#menuToggle { 
    display: none; 
} 
.menu { 
    width: 100%; 
    position: absolute; 
    top: 66px; 
    transition: all 300ms ease-in-out; 
} 
.menu-icon { 
    float: right; 
    color: #2f2f2f; 
    cursor: pointer; 
    padding-top: 0.46em; 
    padding-right: 1em; 
    padding-left: 1em; 
    padding-bottom: 0.46em; 
    text-decoration: none; 
    font-size: 30px; 
} 
.menu { 
    display: none; 
} 
#menuToggle:checked ~ header .menu { 
    display: block; 
    top; 
    66px; 
} 
#logo { 
    float: none; 
    text-align: left; 
    padding-top: 7px; 
    padding-left: 2em; 
    height: inherit; 
} 

Answer 1

#menuToggle:checked ~ header .menu { 
    display: block; 
    top; 
    66px; 
} 

應該

#menuToggle:checked ~ header .menu { 
    display: block; 
    top: 66px; 
} 

Answer 2

             
  
 
   
 
    
@media screen and (min-width:600px) { 
 
#logo { 
 
float: left; 
 
} 
 
.menu { 
 
width: 100%; 
 
height: 70px; 
 
position: absolute; 
 
display: block; 
 
} 
 
.menu-icon { 
 
display: none; 
 
} 
 
header { 
 
height: 70px; 
 
background-color: #FFF; 
 
margin: auto; 
 
width: 100%; 
 
} 
 
nav { 
 
height: -66px; 
 
width: 100%; 
 
} 
 
nav ul { 
 
background-color: #FFF; 
 
display: inline; 
 
float: right; 
 
padding: 0.55em 2em 0 0; 
 
height: inherit; 
 
} 
 
nav ul li { 
 
display: inline; 
 
margin: 0.2em auto; 
 
} 
 
nav ul li:hover { 
 
background-color: #FFF; 
 
} 
 
nav ul li a { 
 
padding: 0 2em; 
 
} 
 

 
 
    
<!-- === MENUTOGGLE === --> 
 
<input type="checkbox" name="checkbox" id="menuToggle" value="value"> 
 
<label for="menuToggle" class="menu-icon">&#9776;</label> 
 
<!-- ==== HEADER ==== -->  
 
<header> 
 
<div id="logo" class="brand"> 
 
    <h1><img src="images/logo.png" alt="Hello"></h1> 
 
</div>`enter code here` 
 
    <nav class="menu"> 
 
     <ul> 
 
      <li><a href="#">Work</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li><a href="#">Blog </a></li> 
 
      <li><a href="#">Contact</a></li> 
 
     </ul> 
 
    </nav> 
 
</header>