このドロップダウンで別の要素が移動するのはなぜですか？

Question

サイト用の新しいナビゲーションバーを作成しています。JSを使用して、単純な非表示のコンテンツdivを開きます。

私はそれらを必要とする親セレクタを持っていますが、1つをクリックすると、他の親がジャンプします。

http://codepen.io/NaughtySquid/pen/xRYaWd

// dropdowns 
 
function toggle_visibility(id){ 
 
    event.preventDefault(); 
 
    // close any open menus 
 
    // TODO 
 
    // open this menu 
 
    var e = document.getElementById(id); 
 
    if(e.style.display == 'block') { 
 
    e.style.display = 'none'; 
 
    }else{ 
 
    e.style.display = 'block'; 
 
    } 
 
}

.container { 
 
    margin: 0px auto; 
 
    width: 960px; 
 
} 
 
/* Navbar */ 
 
.navigation-main { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 49px; 
 
    z-index: 10001; 
 
    background-color: #222; 
 
} 
 
.header-navbar { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.caret-down { 
 
    display: inline-block; 
 
    width: 0px; 
 
    height: 0px; 
 
    vertical-align: middle; 
 
    border-top: 4px solid #999; 
 
    border-right: 4px solid transparent; 
 
    border-left: 4px solid transparent; 
 
    border-top-style: dotted; 
 
    content: ""; 
 
} 
 
/* alerts menu */ 
 
.alerts-box {position: relative; float: right; right: 100px; color: #999; line-height: 29px;} 
 
.alerts-box-new{background-color: #609FA9;} 
 
.alerts-box-new:hover{background-color: #6FA8B1;} 
 
.alerts-box-normal{background-color: #383838;} 
 
.alerts-box-normal:hover{background-color: #4B4B4B;} 
 
.alerts-box a {padding: 10px; height: 29px; display: block; color: #999;} 
 
.alerts-box:hover{cursor: pointer;} 
 
#alerts-content{ 
 
    display: none; 
 
    position: relative; 
 
    float: right; 
 
    right: 65px; 
 
    top: 49px; 
 
    background: #222; 
 
    box-shadow: 1px 1px 1px black; 
 
    padding: 5px; 
 
} 
 
/* user menu */ 
 
.user-box {position: relative; float: right; right: 0px; color: #999; line-height: 29px;} 
 
#user-box-content{ 
 
    display: none; 
 
    position: relative; 
 
    float: right; 
 
    right: -50px; 
 
    top: 49px; 
 
    background: #222; 
 
    box-shadow: 1px 1px 1px black; 
 
    padding: 5px; 
 
} 
 
.nav-special-content ul { 
 
    list-style: none; 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    color: #999; 
 
} 
 
.nav-special-content a {display: block; color: #999;} 
 
.nav-special-content a:hover {color: #fff;}

<div class="navigation-main"> 
 
    <div class="container group"> 
 
<div class="alerts-box right hide-small alerts-box-normal"> 
 
    <a href="#" onclick="toggle_visibility('alerts-content')"> <img src="https://www.gamingonlinux.com/templates/default/images/comments/envelope-open.png" alt=""/></a> 
 
</div> 
 
<div id="alerts-content"> 
 
    <div class="nav-special-content"> 
 
     <ul> 
 
      <li>{:comment_count} new comments</li> 
 
      <li>{:message_count} new messages</li> 
 
     </ul> 
 
    </div> 
 
</div> 
 

 

 
    <div class="user-box hide-small"> 
 
     <a href="#" onclick="toggle_visibility('user-box-content')"><img class="nav-avatar" src="https://www.gamingonlinux.com/uploads/avatars/gallery/1.png" alt="" width="49" height="49"></a> <span class="caret-down"></span> 
 
    </div> 
 
    <div id="user-box-content"> 
 
     <div class="nav-special-content"> 
 
      <ul> 
 
       <li><a href="/index.php?module=profile&user_id=1">View Profile</a></li> 
 
       <li><a href="/usercp.php">User CP</a></li> 
 
       {:admin_link} 
 
       <li><a href="/index.php?act=Logout">Logout</a></li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 1

.alerts-boxで#alerts-contentを入れて、このようないくつかのCSSを追加：神聖ながらくたを

#alerts-content { 
    position: absolute; 
    float: none; 
    right: 0; 
}