Question

我需要一些下拉菜单的帮助。我创建了一个演示来展示我的内容。

我需要一些建议，说明菜单为什么不按下面的内容。我正在尝试创建一个位于div上方的按钮，当按下菜单时，菜单按下div以显示菜单列表。并且按钮仍然位于div的顶部，但位于菜单下方。

<div id="nav-mobile">
    <a href="#">Menu</a>
    <ul style="display: none;">
        <li><a href="index.php">Home</a></li>
        <li><a href="#">Why Us</a></li>
        <li><a href="#">Our Work</a></li>
        <li><a href="#">Our Equipment</a></li>
        <li><a href="#">Video Production</a></li>
        <li id="last-child"><a href="#">Contact</a></li>
    </ul>
</div>




<!-- First Section -->

<div id='imgDiv'>
    <div> 
        <div class="containeralt">
            <img src="img/allthingslogo.gif" />
            <br><br><br>
            <h1 style="font-weight: 100; border: none; font-size: 27px; line-height: 57px; max-width: 800px; margin: 0 auto;"> and the web.</h1>
            <br /><br><br /><br>
            <a href="#imgDiv2"><span class="icon lush-arrow-circle-down" style="font-size: 50px; color: #FFFFFF;"></span></a>
        </div>
    </div>
</div>




    $(document).ready(function() {

    $('#nav-mobile ul').hide();
    $('#nav-mobile').click(function(e) {
        e.preventDefault();
        $('#nav-mobile ul').slideToggle();
    });
});

Answer 1

nav-mobile div有一个height属性，导致它保持该大小。您可以设置最小高度或删除nav-mobile div的height属性，并删除imDiv的margin-top：-20属性，它将正确显示。

div#nav-mobile {
    display: block;
    padding-top: 12px;
    font-size: 0.9em;
}

div#imgDiv {
    position:relative;
    height:75%;
    width:100%;
    background-image:url(http://carmel.coop/wp-content/uploads/2014/04/colorful_blurry_background_ii-wallpaper-1366x768.jpg);
    background-attachment:fixed;
    background-color:transparent;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #FFF;
    display:table;
    text-align: center;
    background-attachment:fixed;
    position:relative;
}

Updated fiddle here

Answer 2

Ur图片是重叠菜单。请看这个小提琴http://jsfiddle.net/MRhR2/3/

删除了以下部分 标题

<div id="nav-mobile">
    <a href="#">Menu</a>
    <ul style="display: none;">
        <li><a href="index.php">Home</a></li>
        <li><a href="#">Why Us</a></li>
        <li><a href="#">Our Work</a></li>
        <li><a href="#">Our Equipment</a></li>
        <li><a href="#">Video Production</a></li>
        <li id="last-child"><a href="#">Contact</a></li>
    </ul>
</div>




<!-- First Section -->

下拉菜单推出下面的div

2 个答案: