html - 隐藏时下拉在导航中留下间隙

Question

我正在尝试让我当前的 CSS 导航响应移动设备。

我目前使用媒体查询对其进行设置，以便当屏幕宽度低于指定大小时，它会更改为 block 形式(堆叠)并且 Logo 右侧会出现一个菜单图标(稍后制作成一个按钮)。

我目前遇到的问题是用于导航中第二个链接的下拉菜单导致第二个和第三个链接之间出现间隙(好像下拉内容占用了隐藏空间)。

我尝试寻找解决方案，但似乎无法为我的特定设置找到正确的答案。基本上，在移动设备上，链接“How It Works”应该位于“Sections”下方。

http://jsfiddle.net/fc45c7p5/

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

不要过多注意 1008 像素的媒体查询最大宽度，我知道这不是标准的移动尺寸，它只是暂时的，我先让它工作。

非常感谢有关此的任何帮助。

Answer 1

visibility 将您的元素保留在那里而不显示它们。当您不想显示隐藏元素占用的空间时，您应该使用 display:none。使用 display:block 再次显示它们。向 a 元素的高度添加一些 CSS 过渡，使显示更平滑。

此处:http://jsfiddle.net/6eshy7n2/