Выпадающее меню не толкает контент вниз, несмотря на 'position: relative'

У меня возникла проблема с выпадающим списком jQuery. Это не толкает содержимое, которое находится ниже него. Я дал им все position: relative, но до сих пор нет радости. Он продолжает плавать поверх него. Как я могу это исправить?Выпадающее меню не толкает контент вниз, несмотря на 'position: relative'

EDIT: Адрес 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

ahhh, это простой! хороший, приветственный помощник! – 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

Спасибо Ракешу, это действительно работает. Это не идеальное решение для меня, так как я хочу скрыть 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, и он должен работать должным образом.

источник

2013-05-30 16:01:11

Спасибо, Джош, это было действительно! Мати, однако, был первым, поэтому я должен был бы дать ему лучший ответ. Спасибо за ваши отзывы в любом случае! – elemelas

Выпадающее меню не толкает контент вниз, несмотря на 'position: relative'

ответ

Смежные вопросы