我是使用 Chrome 的新手，我的页面布局如下，当移出顶部元素时，CSS 菜单下拉菜单不会保留。http://jsfiddle.net/XxGb8/1/。
下拉菜单在 Chrome 中不起作用，在 IE 和 Firefox 中可以正常工作。提前致谢。
我查看了其他答案，这暗示它可能是 Chrome 中的下拉菜单问题 - 未正确下拉
#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>©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;
}