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/

CSS下拉菜单无法在Chrome中使用

1 个答案: