空間下拉菜單 - HTML5/CSS3

Question

我有這個下拉菜單：

的問題是，在移動觀，我有預留空間，因爲當有人點擊菜單，如果我不保留空間，登錄和菜單中的li將合併

我該如何解決這個問題？

謝謝

Answer 1

在您的實時代碼中，只需刪除空間即可。由於用戶不會查看菜單以及同時輸入憑據！

您可以使下拉按下移動視圖中的內容。我確定在移動視圖中爲菜單設置固定標題並不是一個好主意。所以，你可以看看這個工作演示這樣的：

$(document).ready(function() { 
 
    $("header a").click(function() { 
 
    $(this).next().slideToggle(); 
 
    return false; 
 
    }); 
 
});

* {font-family: Segoe UI;} 
 
body, ul, li {margin: 0; padding: 0; list-style: none;} 
 
.wrap {width: 285px; margin: 15px auto; border: 5px solid rgba(0,0,0,0.75); box-shadow: 0 0 5px 2px #000;} 
 
header {background-color: #000; text-align: center;} 
 
header a {color: #fff; text-decoration: none; display: block; padding: 5px;} 
 
img {display: block; width: 100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="wrap"> 
 
    <header> 
 
    <a href="#">Click for Menu</a> 
 
    <ul class="menu" style="display: none;"> 
 
     <li><a href="">Item 1</a></li> 
 
     <li><a href="">Item 2</a></li> 
 
     <li><a href="">Item 3</a></li> 
 
     <li><a href="">Item 4</a></li> 
 
     <li><a href="">Item 5</a></li> 
 
    </ul> 
 
    </header> 
 
    <img src="http://i.imgur.com/IJhK0iG.jpg?1" alt="Login" />  
 
</div>