儘管「位置：相對」，但下拉式菜單並未推送內容

我遇到了一個簡單的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; 
}

來源

2013-05-30 elemelas

你可以發佈一個jsFiddle伴隨此代碼？這將有助於我們看到問題所在。謝謝！ –

沒有探索你走！ http://jsfiddle.net/8arUF/ – elemelas

變化height到auto：

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

來源

2013-05-30 15:40:57 Mati

啊，那簡單！好的，歡呼的隊友！ – elemelas

試試這個。

<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

來源

2013-05-30 13:55:43

非常感謝Rakesh，確實有效。然而，這對我來說不是一個理想的解決方案，因爲我想默認情況下隱藏div＃nav-mobile並僅顯示移動設備，而且我顯然始終需要標題。如果您有任何更多想法，請分享。 – elemelas

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

請檢查DEMO。

來源

2013-05-30 15:46:47 Soarabh

只需將其添加到CSS ID，它應該按預期工作。

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

來源

2013-05-30 16:01:11

謝謝喬希，那的確是！然而，馬蒂是第一個，所以我必須給他最好的答案。無論如何感謝您的反饋！ – elemelas

儘管「位置：相對」，但下拉式菜單並未推送內容

回答

相關問題