我已经构建了一个带有导航菜单的简单网站，该菜单具有清晰：应用了两种CSS样式。在这个网站上，有一个基本的标志和一组图标。徽标向左浮动，而图标向右浮动。该网站在Firefox和Chrome中看起来像这样......
http://i.stack.imgur.com/nPYuL.jpg
区别在于Chrome不接受明确：两者（应用于菜单的div）在CSS文件中。我怎样才能让它发挥作用？
这是HTML ...
<!DOCTYPE html>
<html><head>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<title>Matiny's Sample Site 1</title>
</head>
<body onLoad="MM_preloadImages('images/thumbs/A%20Thumbnail%202.jpg','images/thumbs/B%20Thumbnail%202.jpg','images/thumbs/S%20Thumbnail%202.jpg','images/thumbs/J%20Thumbnail%202.jpg','images/thumbs/T%20Thumbnail%202.jpg','images/thumbs/P%20Thumbnail%202.jpg','images/thumbs/A Thumbnail 2.jpg','images/thumbs/B Thumbnail 2.jpg','images/thumbs/S Thumbnail 2.jpg','images/thumbs/J Thumbnail 2.jpg','images/thumbs/T Thumbnail 2.jpg','images/thumbs/P Thumbnail 2.jpg')">
<div id="main">
<div id="logo">
<img src="images/Icons/Logo.png"/>
</div>
<div id="sm-icons">
<ul>
<li><a href="http://www.facebook.com"><img src="images/Icons/facebook_64.png" id="Image7" onMouseOver="MM_swapImage('Image7','','images/Icons/facebook_64 2.png',0)" onMouseOut="MM_swapImgRestore()"/></a>
<li><a href="https://www.rss.com/"><img src="images/Icons/rss_64.png" id="Image8" onMouseOver="MM_swapImage('Image8','','images/Icons/rss_64 2.png',0)" onMouseOut="MM_swapImgRestore()"/></a>
<li><a href="https://twitter.com/"><img src="images/Icons/twitter_64.png" id="Image9" onMouseOver="MM_swapImage('Image9','','images/Icons/twitter_64 2.png',0)" onMouseOut="MM_swapImgRestore()"/></a>
<li><a href="https://www.youtube.com/"><img src="images/Icons/youtube_64.png" id="Image10" onMouseOver="MM_swapImage('Image10','','images/Icons/youtube_64 2.png',0)" onMouseOut="MM_swapImgRestore()"/></a>
</ul>
</div>
<div id="menu">
<ul>
<li><a href="index.html">WELCOME</a></li>
<li><a href="#">ABOUT</a>
<ul>
<li><a href="">The Man</a></li>
<li><a href="">The Myth</a></li>
<li><a href="">The Legend</a></li>
</ul>
</li>
<li><a href="games.html">GAMES</a>
<ul>
<li><a href="galleries/Ezio.html">Assasin's Creed 2</a></li>
<li><a href="galleries/Bruce.html">Batman Arkham City</a></li>
<li><a href="galleries/Rico.html">Just Cause 2</a></li>
<li><a href="galleries/Prince.html">Prince of Persia</a></li>
<li><a href="galleries/Boss.html">Saints Row 3</a></li>
<li><a href="galleries/TDU2.html">Test Drive Unlimited 2</a></li>
</ul>
</li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
这是CSS ...
/* CSS Document */
/* Reset */
html, body { margin: 0; padding: 0; border: 0; background: #000; font-size:16px; }
h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size:100%;
font-weight: normal;
font-style: normal;
line-height: 100%;
text-indent: 0;
text-decoration: none;
color: #000;
}
/* Divisions */
#main { width:900px; margin:0 auto; background-color:#FFF; padding: 30px 100px;}
#logo { margin:30px; float:left}
#sm-icons { float:right; }
#sm-icons ul li {display:inline}
#sm-icons ul {margin-top: 30px}
#menu {clear:both;
width: 800px;
margin-top: 50px;
margin-right: auto;
margin-bottom: 50px;
margin-left: auto;
z-index: 6;
position: relative;
}
#menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu ul li {
float: left;
position: relative;
}
#menu ul li a {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 100%;
color: #CCC;
text-decoration: none;
background-color: #333;
text-align: center;
display: block;
height: 50px;
width: 200px;
line-height: 50px;
transition: background .5s, font-size .2s;
}
#menu ul li a:hover {
font-size: 120%;
color: #000;
background-color: #CCC;
}
#menu ul li ul {
position: absolute;
}
#menu ul li ul li a {
visibility: hidden;
height: 0px;
opacity:.5;
transition: all .2s ease-out;
}
#menu ul li:hover ul li a {
height: 50px;
visibility: visible;
opacity:1;
transition: all .3s ease-out;
}
#banner-pictures {margin-bottom: 50px}
#central-content { width: 800px; text-align:center; margin:25px auto;}
#central-max width { width: 100%; }
#footer {clear:both; border-top: 1px #666 solid}
/* Text Elements */
p { color:#000; font-size:14px; line-height:120%;
margin:15px 0; margin-bottom: 30px }
p .left { margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p .right { margin: 1.5em 0 1.5em 1.5em; padding: 0; }
blockquote { color:#000; font-size:12px; }
strong { font-weight: bold; }
em { font-style: italic; }
/* Headings */
h1, h2, h3, h4, h5, h6 { font-weight: bold; color:#000 }
h1 { font-size:24px; }
h2 { font-size:22px; padding-bottom: 15px; }
h3 { font-size:18px; }
h4 { font-size:14px; }
h5 { font-size:14px; }
h6 { font-size:14px; }
/* Misc */
.date {}
.footer-text {text-align:center}
.thumbs {padding: 10px}
#wrapper {
display: block;
height: 300px;
width: 900px;
margin: auto;
}
#container { display:block; background-color:#FFC; float:left;
height: 300px; width: 900px; overflow:auto; }
#slider {
display: block;
float: left;
height: 300px;
width: 900px;
overflow: hidden;
position: absolute;
z-index: 4;
}
.slides {
width: 900px;
overflow: hidden;
margin: 0 auto;
text-align:center;
}
ul, li {
margin: 0;
padding: 0;
}
.slides ul {
width: 5400px;
position: relative;
-moz-animation: slide 36s infinite;
-webkit-animation: slide 36s infinite;
}
.slides li {
float:left;
list-style: none;
position: relative;
}
.slides a { text-decoration:none;}
h5 {
position:absolute;
bottom: 5px;
width: 100%;
background: rgba(0,0,0,.4);
color: white;
padding: 20px 10px;
font-size:24px;
margin-bottom: 0;
-moz-animation: headings 36s infinite;
-webkit-animation: headings 36s infinite;
}
.slides ul:hover,
.slides ul:hover h5 {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
}
@-moz-keyframes slide {
0% {left: 0;}
15% {left: 0;}
20%, 30% {left: -900px;}
35%, 45% {left: -1800px;}
50%, 60% {left: -2700px;}
65%, 75% {left: -3600px;}
80%, 90% {left: -4500px;}
100%{left:0px;} /* Reset to Zero */
}
@-moz-keyframes headings {
15%, 20%, 30%, 35%, 45%, 50%, 60%, 65%, 75%, 80%, 90%
{bottom: 5px;}
18%, 33%, 48%, 62%, 78%, 93% /* 2% before the 1st column */
{bottom: -200px;}
}
@-webkit-keyframes slide {
0% {left: 0;}
15% {left: 0;}
20%, 30% {left: -900px;}
35%, 45% {left: -1800px;}
50%, 60% {left: -2700px;}
65%, 75% {left: -3600px;}
80%, 90% {left: -4500px;}
100%{left:0px;} /* Reset to Zero */
}
@-webkit-keyframes headings {
15%, 20%, 30%, 35%, 45%, 50%, 60%, 65%, 75%, 80%, 90%
{bottom: 5px;}
18%, 33%, 48%, 62%, 78%, 93% /* 2% before the 1st column */
{bottom: -200px;}
}
答案 0 :(得分：0)
最好在顶部项目周围包裹div并将其设置为overflow: hidden。但是如果您想保留HTML，请在菜单上尝试相同的操作：
#menu {
overflow: hidden;
}
（在我的代码测试中适合我。）