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

これを試して。

<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 に答える