'position : relative'에도 불구하고 드롭 다운 메뉴가 내용을 푸시하지 않음

간단한 jQuery 드롭 다운에 문제가 있습니다. 그것은 그 아래에있는 내용을 밀어 내리고 있지 않습니다. 나는 그들 모두에게 position: relative를 주었지만 여전히 기쁨은 없습니다. 그것의 위에 떠있는 유지. 이 문제를 어떻게 해결할 수 있습니까?'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을 게시 할 수 있습니까? 문제가 무엇인지 알 수 있습니다. 감사! –

여기에 probs가 없습니다! http://jsfiddle.net/8arUF/ – elemelas

변경 heightauto에 : 모두 내가 탐색 및 콘텐츠에 대해 이야기하고 별도의 개체이기 때문에

#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

고마워, 조쉬, 그게 사실이야! 그러나 Mati가 처음 이었으므로 나는 그에 대한 최상의 답을 주어야했다. 어쨌든 귀하의 의견에 감사드립니다! – elemelas

'position : relative'에도 불구하고 드롭 다운 메뉴가 내용을 푸시하지 않음

답변

관련 문제