CSS下拉式菜單不會與父菜單對齊

Question

無法使下拉菜單直接與父菜單對齊 - 此刻它們總是從頂層菜單的中心落下，請參閱圖像。

http://i.stack.imgur.com/lS20F.png

CSS如下：

@charset "utf-8"; 
body { 
    background:url('body-bkg.jpg'); 
    background-repeat:no-repeat; 
    background-position:center top; 
} 

#navMenu { 
    margin:0; 
    padding:0; 
    text-align:center; 
} 

/*controls top parent box in navigation bar*/ 
#navMenu ul { 
    margin:0; 
    padding:0; 
    line-height:30px; 
    display: inline-block; 
} 

/*controls top parent box in navigation bar*/ 
#navMenu li { 
    margin:0; 
    padding:0; 
    list-style:none; 
    position:relative; 
    background-color:hsla(0, 9%, 202%, 0.7); 
    float:left; 
} 

#navMenu ul li { 
    position:relative; 
} 
/*controls link text parent and children boxes in navigation bar*/ 
#navMenu ul li a { 
    text-decoration:none; 
    height:30px; 
    width:150px; 
    display:block; 
    color:#2e1c1c; 
    border:1px solid #000; 

} 

/*controls children boxes in navigation bar*/ 
#navMenu ul ul { 
    position:absolute; 
    visibility:hidden; 
    top:31px; 
} 

/*controls children boxes in navigation bar when hovered on parent box*/ 
#navMenu ul li:hover ul { 
    visibility:visible; 
} 

/*controls parent box when hovered on children box*/ 
#navMenu li:hover { 
    background:#387cf7; 
} 

/*controls child box when hovered on child box*/ 
#navMenu ul li:hover ul li a:hover { 
    background:white; 
    } 

HTML如下：

<div id="navMenu"> 
     <ul> 
      <li><a href="#">Destinations</a> 
      <ul> 
       <li><a href="#">Asia</a> </li> 
       <li><a href="#">Africa</a> </li> 
       <li><a href="#">Europe</a> </li> 
       <li><a href="#">North America</a> </li> 
       <li><a href="#">South America</a> </li> 
       <li><a href="#">Antartica</a> </li> 
      </ul> 
      </li> 
      <li><a href="#">Holiday Types</a> 
      <ul> 
       <li><a href="#">Short Breaks</a> </li> 
       <li><a href="#">Beaches</a> </li> 
       <li><a href="#">Adventure</a> </li> 
       <li><a href="#">Walking</a> </li> 
       <li><a href="#">Continents</a> </li> 
       <li><a href="#">Safari</a> </li> 
       <li><a href="#">Cruise</a> </li> 
       <li><a href="#">Family</a> </li> 
       <li><a href="#">Ultimate</a> </li> 
      </ul> 
      </li> 
      <li><a href="#">When to go</a> 
      <ul> 
       <li><a href="#">Winter</a> </li> 
       <li><a href="#">Spring</a> </li> 
       <li><a href="#">Summer</a> </li> 
       <li><a href="#">Autumn</a> </li> 
      </ul> 
      </li> 
      <li><a href="#">Corporate</a> </li> 
      <li><a href="#">Special Offers</a> </li> 
      <li><a href="#">About Us</a> </li> 
      <li><a href="#">Blog</a> </li> 
      <li><a href="#">Contact</a> </li> 
     </ul> 
     </div> 

謝謝，阿利。

Answer 1

該解決方案可以爲你工作：

Demo Fiddle

我看你使用visibility:hidden很多，但像這樣的，我覺得display: none是比較容易的工作情況。

CSS：

#navMenu ul ul { 
    // current styles 

    left: 0px; 
}