0

我在使用简单的 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;  
}
4

4 回答 4

1

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

#nav-mobile{
  min-height:33px;
  height:auto;
}
于 2013-05-30T16:01:11.747 回答
1

更改height为auto：

#nav-mobile {
    display: block;
    padding-top: 12px;
    height: auto;
    min-height: 33px;
    overflow: hidden;
    font-size: 0.9em;
}
于 2013-05-30T15:40:57.750 回答
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>

工作示例：示例

于 2013-05-30T13:55:43.913 回答
-1

它不会下推，因为两者都是独立的实体，我正在谈论导航和内容。把你的标记放在一起，看看这样的结果

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

请查看演示。

于 2013-05-30T15:46:47.090 回答