Question

我遇到一个简单的jQuery下拉列表问题。它并没有压低它下面的内容。我已经给了他们所有position: relative，但仍然没有快乐。它一直漂浮在它上面。我怎么能纠正这个？

编辑：建议使用jsFiddle！

<script type="text/javascript">
$(document).ready(function() {

    $('#nav-mobile ul').hide();
    $('#nav-mobile').click(function(e) {
        e.preventDefault();
        $('#nav-mobile ul').slideToggle();
    });
});
</script>
</head>

<body>
<div id="nav-mobile">
    <a href="#">Menu</a>
    <ul>
        <li><a href="<?php echo $path; ?>index.php">Home</a></li>
        <li><a href="<?php echo $path; ?>audio-visual-company/audio-visual-company.php">Why Us</a></li>
        <li><a href="<?php echo $path; ?>audio-visual-hire/audio-visual-hire.php">Our Work</a></li>
        <li><a href="<?php echo $path; ?>sound-hire/sound-hire.php">Our Equipment</a></li>
        <li><a href="<?php echo $path; ?>video-production-dublin/video-production-dublin.php">Video Production</a></li>
        <li id="last-child"><a href="<?php echo $path; ?>audio-visual-dublin/audio-visual-dublin-contact.php">Contact</a></li>
    </ul>
</div>
<header id="header">
    <a href="../index.php"><img src="gfx/logo.png" alt="Conference Services" id="logo" /></a>
</header>
</body>
</html>

CSS：

#nav-mobile {
    display: block;
    padding-top: 12px;
    height: 33px;
    font-size: 0.9em;
}
#nav-mobile, #nav-mobile ul, #nav-mobile li {
    position: relative; 
}
#nav-mobile ul {
    margin: 0;
    padding: 0;
    width: 100%;
    background: #151515;
}
#nav-mobile ul li {
    width: 100%;
    display: block; 
    padding: 13px 0 13px 0;
    margin: 0;
}
#nav-mobile ul a:hover {
    background: none;   
}
#nav-mobile ul li:hover {
    background: #272727;    
}
header {
    height: 150px;  
}

Answer 1

试试这个。

<body>
<div id="nav-mobile">
    <a href="#">Menu</a>
    <ul>
        <li><a href="<?php echo $path; ?>index.php">Home</a></li>
        <li><a href="<?php echo $path; ?>audio-visual-company/audio-visual-company.php">Why Us</a></li>
        <li><a href="<?php echo $path; ?>audio-visual-hire/audio-visual-hire.php">Our Work</a></li>
        <li><a href="<?php echo $path; ?>sound-hire/sound-hire.php">Our Equipment</a></li>
        <li><a href="<?php echo $path; ?>video-production-dublin/video-production-dublin.php">Video Production</a></li>
        <li id="last-child"><a href="<?php echo $path; ?>audio-visual-dublin/audio-visual-dublin-contact.php">Contact</a></li>
    </ul>

    <header id="header">
    <a href="../index.php"><img src="gfx/logo.png" alt="Conference Services" id="logo" /></a>
</header>
    </div>
</body>

工作示例：Example

Answer 2

将height更改为auto：

#nav-mobile {
    display: block;
    padding-top: 12px;
    height: auto;
    min-height: 33px;
    overflow: hidden;
    font-size: 0.9em;
}

Answer 3

只需要将它添加到CSS ID中，它应该按预期工作。

#nav-mobile{
  min-height:33px;
  height:auto;
}

Answer 4

它没有推倒，因为两者都是独立的实体，我在谈论导航和内容。将您的标记放在一起，看看结果如下

<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>
<header id="header">
    LOGO
</header>

</div>

请查看DEMO。

尽管'位置：亲戚'，下拉菜单不会将内容推下来

4 个答案: