隱藏時在導航中放下樹葉間隙

我正在嘗試使我當前的CSS導航對移動設備響應。隱藏時在導航中放下樹葉間隙

我目前已經設置了媒體查詢，以便當屏幕寬度低於指定的大小時，它會更改爲阻止表單（堆疊），並在徽標的右側出現菜單圖標（稍後會顯示做成一個按鈕）。

我目前遇到的問題是用於我的第二個鏈接在導航中的下拉菜單導致第二個和第三個鏈接之間出現間隙（就好像下拉內容正在佔用隱藏的空間）。

我試過尋找解決方案，但似乎無法找到我的特定設置的正確答案。基本上，手機上的「工作原理」鏈接應位於「部分」下。

 <a href="#"> 
     <img class="logo" src="images/logo.png" alt="Logo" style="width:330px;height:100px"/> 
     </a> 

     <div id="menu-icon">&#57349;</div> 
     <br></br> 

    </div> 
    <div class="navbar"> 
     <ul class="navbar cf"> 
       <li><a href="index.html">HOME</a></li> 

       <li><a href="#">SECTIONS</a> 
           <ul> 
            <li><a href="retail.html">RETAIL</a></li> 
            <li><a href="#">HOTEL</a></li> 
            <li><a href="#">RESTAURANT</a></li> 
            <li><a href="#">SHOPPING</a></li> 
           </ul> 
       <li><a href="how.html">HOW IT WORKS</a></li>     
       <li><a href="#">OUR EXPERIENCE</a></li>     
       <li><a href="#">TESTIMONIALS</a></li> 
       <li><a href="#">NEWS</a></li> 
       <li><a href="">CONTACT US</a></li> 

      </ul> 
    </div>

不要帶太多注意1008px媒體查詢最大寬度的，我知道這是不是標準的移動尺寸，它的只是暫時的，而我首先得到它。

任何有關這方面的幫助真的很感激。

來源

2015-01-11 Adam R

visibility將您的元素保留在那裏而不顯示它們。如果您不想顯示隱藏元素所需的空間，則應該使用display:none。使用display:block再次顯示它們。將一些CSS轉換添加到a元素的高度，以使顯示更平滑一些。

這裏：http://jsfiddle.net/6eshy7n2/

來源

2015-01-11 17:35:50 bluefog

非常感謝。這工作。我確定它是顯示器：沒有，但我忘了顯示：塊再次顯示它。 –

添加以下內容。

ul.navbar ul li { float: none; width: 100%; display:none;} 
ul.navbar li:hover > ul li{display: block;}

你必須使li S中ul的內線父li沒有被徘徊的時候其實並沒有顯示。當它被佔用時，您將display的值更改爲block以使其可見。

來源

2015-01-11 17:34:18

隱藏時在導航中放下樹葉間隙

回答

相關問題