html - 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/