独立したdivの切り替え

Question

私はTwitterのようなナビゲーションバーを作っていますが、そのバーの中の1つのdivが通知やニュースでスクロールし、他のバーのコンテンツはそのままの状態にしておきたいと思います。なにか提案を？ http://jsfiddle.net/fdezluis96/JJ29E/

#navigation{ 
position:fixed; 
top:0; 
left:0; 
width:100%; 
padding:5px; 
color: #fff; 
height:32px; 
font-size:20px; 
background: #333; 
}​ 

そして、これは

<div id="navigation">This is the main div static content 
    <div id="subnavigation">This is the scrolling content.</div> 
</div>​ 

おかげでメインのHTMLコードです！ live-pin.comウェブサイトの

Answer 1

、これは動作しているようです：

<!-->Add "position: relative;" to have a non-statically position parent.</--> 
<div class="nav-collapse" style="position: relative;"> 

と

<!-->Change inline styles from "background:#fff; width:300px; overflow:auto;" to "background: #fff; border: 1px solid #fff; border-top-width:0px; border-bottom-width:0px; background: #666; border-radius: 5px; border-top-right-radius: 0px; border-top-left-radius: 0px; position: absolute; max-width: 300px;" (mostly from the fiddle, but "position: absolute" to keep it where it is and remove it from the normal document flow; removing it from the document flow is what allows it to escape its parent's containment.) </--> 
<li id="notificationss" style="background: #fff; border: 1px solid #fff; border-top-width:0px; border-bottom-width:0px; background: #666; border-radius: 5px; border-top-right-radius: 0px; border-top-left-radius: 0px; position: absolute; max-width: 300px;"> 
    dssdadsadas 
    <br>dsadsasdadssdadsadas 
    <br>dsadsasdadssdadsadas 
    <br>dsadsasdadssdadsadas 
    <br>dsadsasdadssdadsadas 
    <br>dsadsasdadssdadsadas 
    <br>dsadsasda 
</li>