CSS下拉菜單在Chrome中不起作用

Question

我是新手，使用Chrome瀏覽器，我的頁面有以下佈局，CSS菜單下拉菜單在移出頂層元素時不會停留。 http://jsfiddle.net/XxGb8/1/。

該下拉菜單在Chrome中不起作用，在IE和Firefox中正常工作。提前致謝。

我看過其他的答案，這暗示它可能是 Dropdown Menu Issues in Chrome - Not Dropping Down Properly

#submenu ul li ul { 
padding: 0; 
position: absolute; 
top: 40px;(When I change this however the menu still doesnt function correctly{ 

HTML

<div id="container"> 
     <div id="menu"> 
      <div id="submenu"> 
       <ul> 
        <li> 
         <a href="index.php">Home</a> 
         <ul> 
          <li>Web Design</li> 
          <li>Web Development</li> 
          <li>Illustrations</li> 
         </ul> 
        </li> 
        <li>About 
         <ul> 
          <li>News</li> 
          <li>Forum</li> 
          <li>Development Blog</li> 
         </ul> 
        </li> 
        <li> 
         <a href="links.php">Links</a> 
        </li> 
        <li> 
         <a href="/support/support.php">Support</a> 
        </li> 
        <li> 
         <a href="mailto:webmaster@businessmanager.com">Contact Us</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
     <div id="content"> 

      <div id="sub-content-left"> 
       <h1>Testing</h1> 
       <p>Lorem ipsum dolor sit amet, asdasdconsectetur adipisicing elit. Dolor, obcaecati incidunt voluptatibus perspiciatis labore quasi beatae ad laboriosam aliquid fuga ullam accusantium sint doloremque possimus cumque veritatis commodi iste hic.</p> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, accusantium, qui, ipsa rem dolores voluptas excepturi officia nisi quas laborum voluptatibus architecto placeat aperiam consequuntur eveniet delectus non voluptates cum? Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
       <div id="homepage-login"> 
        <p>Login Form</p> 
       </div> 
      </div> 
      <div id="sub-content-right"> 
       <h2>About..</h2> 
       <p>Incidunt, accusantium, qui, ipsa rem dolores voluptas excepturi officia nisi quas laborum voluptatibus architecto placeat aperiam consequuntur eveniet delectus non voluptates cum? Lorem ipsum dolosdsdsddsdr sit amet, consectetur adipisicing elit. Incidunt, accusantium, qui, ipsa rem dolores voluptas excepturi officia nisi quas laborum voluptatibus architecto placeat aperiam consequuntur eveniet delectus non voluptates cum?Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
       <h3>The End Goal . . .</h3> 
       <p>Incidunt, accusantium, qui, ipsa rem dolores voluptas excepturi officia nisi quas laborum voluptatibus architecto placeat aperiam consequuntur eveniet delectus non voluptates cum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, accusantium, qui, ipsa rem dolores voluptas excepturi officia nisi quas laborum voluptatibus architecto placeat aperiam consequuntur eveniet delectus non voluptates cum?</p> 
      </div> 

     </div> 


    <div id="footer"> 
      <p>&copy;Testing</p> 
     </div> 
     </div> 

    body { 
    font-family:'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    font-size: 13px; 
    background: #E7EBF2; 
} 

CSS

#container{ 
    margin-top:-10px; 
    width:103%; 
    margin-left:-15px; 
    padding-left:1px; 
    min-height:100%; 
} 
#content{ 
    padding-top:15px; 
    padding-left:25px; 
    padding-right:20px; 
    margin-right:10px; 
} 
#logo { 
display:inline; 
    position:fixed; 
    padding-left:25px; 
} 
#menu { 
    background:#3B5999; 
    padding:10px; 
    z-index:100px; 
    border-radius:10px; 
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
    position:fixed; 
    width:100%; 
    height:50px; 
    clear: both; 

} 
#footer{ 
    text-align:center; 
    margin-bottom:-10px; 
    width:95%; 
    bottom:5px; 
    position:relative; 
} 
#content{ 

    padding-top:60px; 
} 
#main{ 
    float:clear; 
} 
#sub-content-left{ 
float:left; 
width:74%; 
min-height:100%; 
padding:5px; 
} 
#sub-content-right{ 
float:left; 
width:20%; 
min-height:100%; 
padding:5px; 
} 
#submenu a{ 
color:inherit; 
    background:inherit; 
    text-decoration:none; 
} 

#submenu a:hover{ 
    font-stretch:extra-expanded; 
} 

#homepage-login{ 

} 
#submenu { 
    left:45%; 
    margin-left:-240px; 
    width:480px; 
    background:#fff; 
    text-align:center; 
    border-radius:10px; 
    padding-left:50px; 
    padding-right:50px; 
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
    border-radius:10px; 
    clear: both; 
    z-index:100; 
    position: absolute; 
} 
#submenu ul { 
    text-align: left; 
    display: inline; 
    margin: 0; 
    padding: 15px 4px 17px 0; 
    list-style: none; 

} 
#submenu ul li { 
    font: bold 12px/18px sans-serif; 
    display: inline-block; 
    margin-right: -4px; 
    position: relative; 
    padding: 15px 20px; 
    background: #fff; 
    cursor: pointer; 
    -webkit-transition: all 0.2s; 
    -moz-transition: all 0.2s; 
    -ms-transition: all 0.2s; 
    -o-transition: all 0.2s; 
    transition: all 0.2s; 
/* border-right:1px #3B5999 solid; 
    border-left:1px #3B5999 solid;*/ 
} 

#submenu ul li:hover { 
    background: #3B5999; 
    color:#fff ; 
} 
#submenu ul li ul { 
    padding: 0; 
    position: absolute; 
    top: 48px; 
    left: 0; 
    width: 150px; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    display: none; 
    opacity: 0; 
    visibility: hidden; 
    -webkit-transiton: opacity 0.2s; 
    -moz-transition: opacity 0.2s; 
    -ms-transition: opacity 0.2s; 
    -o-transition: opacity 0.2s; 
    -transition: opacity 0.2s; 
} 
#submenu ul li ul li { 
    background: #3B5999; 
    display: block; 
    color:#fff ; 
    border-bottom:1px #3B5999 solid; 
    border-left:1px #3B5999 solid; 
    border-right:1px #3B5999 solid; 
    border-top:1px #3B5999 solid; 
} 
#submenu ul li ul li:last-child { 
    border-bottom-left-radius:10px; 
    border-bottom-right-radius:10px; 
} 
#submenu ul li ul li:hover { 
    background: #3B5999; 
} 
#submenu>ul>li:hover ul { 
    display: block; 
    opacity: 1; 
    visibility: visible; 
} 

Answer 1

的問題是，你已經使用z-index屬性的無效值 - 它只接受一個整數值，但你已經使用100px

#menu { 
    z-index: 100; /* you had 100px */ 
} 

http://jsfiddle.net/XxGb8/3/