CSSドロップダウンメニューの整列の問題

純粋なCSSのドロップダウンメニューで作業していますが、いくつかの整列の問題がありました。CSSドロップダウンメニューの整列の問題

具体的には、サブメニュー項目は、それぞれのメニュー項目にカーソルを置くと右に移動します。ここではフィドルだ：私は同様の質問CSS Drop Down Menu : nav ul ul li Moved to Rightをチェックし、確認

header #menustrip #menu nav ul 
     { 
      list-style: none;    
      position: relative;    
     } 

      header #menustrip #menu nav ul li 
      { 
       display: inline-block;     
      } 

       header #menustrip #menu nav a 
       { 
        display: block; 
        color: #1d120c; 
        font-weight: bold; 
        font-size: 18px; 
        padding: 0 /*15px*/10px; 
        margin: 0; 
        border: 2px solid transparent; 
       } 

       header #menustrip #menu nav a:hover 
       { 
        border-left: 2px solid #97bc14; 
        border-right: 2px solid #97bc14; 
        color: #97bc14 
       } 

       header #menustrip #menu nav a#active-page 
       { 
        color: #97bc14 
       } 

       header #menustrip #menu nav a#quote-page 
       { 
        margin-left: 15px; 
        border: 2px solid #97bc14; 
        color: #97bc14 
       } 

       header #menustrip #menu nav a#quote-page:hover 
       { 
        border: 2px solid #97bc14; 
        background-color: #97bc14; 
        color: #fcffff; 
       } 

       header #menustrip #menu nav ul li ul 
       { 
        /*display: none;*/ 
        position: absolute; 
        padding-left: 0; 
       } 

       header #menustrip #menu nav ul li:hover > ul 
       { 
        display: inherit; 
       } 

        header #menustrip #menu nav ul li ul li 
        { 
         /*left: -100%;*/ 
         min-width: 100px; 
         float: none; 
         display: list-item; 
         position: relative;       
        }

https://jsfiddle.net/fhakjnhe/5/

HTML

<body> 

<header> 

<div id="menustrip"> 

       <div id="logo_container"> 
        <h1>LOGO</h1>     
       </div> 

       <div id="menu"> 
        <nav> 
         <ul> 
          <li><a id="active-page" href="#">AAA</a></li 
          ><li><a href="#">BBB</a> 
           <ul> 
            <li style="background-color:red;">A</li> 
            <li>B</li> 
           </ul> 
          </li 
          ><li><a href="#">CCC</a></li 
          ><li><a href="#">DDD</a></li 
          ><li><a href="#">EEE</a> 
           <ul> 
            <li style="background-color:blue;">A2</li> 
            <li>B2</li> 
           </ul> 
          </li 
          ><li><a href="#">FFF</a></li 
          ><li><a id="quote-page" href="#">GGG</a></li> 
         </ul> 


        </nav>    
       </div> 

      </div>

関連CSS marginとことを0に設定した。私の場合でも、サブアイテムはホバリング時に右に移動しますが、「隠れている」の間は大丈夫です。

出典

2016-04-28 EclipticalD