CSS下拉菜單對齊問題

我正在使用純CSS下拉菜單，但遇到了一些對齊問題。CSS下拉菜單對齊問題

具體來說：當鼠標懸停在各自的菜單項上時，子菜單項會移到右側。這裏的小提琴：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

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;       
        }

我查了類似的問題CSS Drop Down Menu : nav ul ul li Moved to Right並檢查margin和padding被設置爲0。同樣在我的情況下，當徘徊時，子項目向右移動，在「隱藏」時似乎保持不變。

來源

2016-04-28 EclipticalD