Переключить Div за пределы текущего Div

Question

В настоящее время у меня есть опция переключения, прикрепленная к элементу li. Однако я не могу отобразить div, который переключается за пределы li родительского div.

<div id="header">
    <header>
        <ul>
            <li>1</li>
            <li class="action" data-content="#content1">2</li>
        </ul>
    </header>
</div>
<div class="content" id="content1">
    <p>A Bunch of Content</p>
</div>

Чтобы сэкономить место, вот моя скрипка: http://jsfiddle.net/Thelawman/9KCg9/ Когда я делаю это, я вижу верхнюю часть переключенного div внутри заголовка. Я хочу отобразить его прямо под элементом заголовка. Заранее спасибо, люди здесь всегда невероятно полезны.

Answer 1

Проблема из-за position:fixed который вы используете для div#header, Попробуй это:

#header {
    overflow:hidden;
    top:0;
    left:0;
    width:100%;
    height:66px;
    z-index:1;
    background-color:#000000;
}

DEMO

или же

Если вы хотите использовать position:fixed чтобы заголовок оставался фиксированным вверху при прокрутке страницы. Ты можешь использовать margin-top в div.content, Попробуй это:

.content {
    display:none;
    width:500px;
    height:200px;
    padding:10px;
    background-color:#FF000D;
    border: 4px solid;
    margin-top:68px;
}

DEMO