为什么第一个菜单不突出显示，或者最后两个菜单突出显示。我相当肯定它与图像有关，但如果确实如此，我不知道如何修复它。
我的 HTML：
<link type="text/css" rel="stylesheet" href="Practise.css"/>
<title>Practise</title>
</head>
<img src="404SQN logo.png" width="1250" class="logo"/>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li class="drop">
<a href="#">About Us</a>
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>About 404SQN</li>
<li>About AAFC</li>
<li>What to Expect</li>
<li>Discipline</li>
</ul>
</div>
</div>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Requests</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Contacts Us</a></li>
</ul>
还有我的 CSS：
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;} /* remember to define focus styles! */ :focus {outline: 0;} /* remember to highlight inserts somehow! */ins {text-decoration: none;}del {text-decoration: line-through;} /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse: collapse;border-spacing: 0;}
.logo {
float: left;
position: absolute;
left: -27.5em;
top: -22em;
z-index: -1;
}
/*---------- BODY --------------------------------*/
body {
text-align: center;
background: #e0e0e0;
padding-bottom: 200px;
z-index: 1;
}
a {
text-decoration: none;
}
/*---------- Wrapper --------------------*/
nav {
width: 95%;
height: 4em;
background: #003C82;
border-radius: 10px;
margin: auto;
position: relative;
top: 6em;
}
ul {
text-align: center;
margin: auto;
}
ul li {
margin-top: -0.5em;
font-family:‘Trebuchet MS’, Helvetica, sans-serif;
cursor: pointer;
-webkit-transition: padding .05s linear;
-moz-transition: padding .05s linear;
-ms-transition: padding .05s linear;
-o-transition: padding .05s linear;
transition: padding .05s linear;
}
ul li.drop {
position: relative;
}
ul > li {
display: inline-block;
}
ul li a {
line-height: 80px;
padding: 0 20px;
height: 80px;
color: #777;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
ul li a:hover {
color: #eee;
}
.dropOut .triangle {
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain {
width: 160px;
position: absolute;
z-index: 2;
left: 50%;
margin-left: -80px; /* half of width */
top: -400px;
}
.dropOut {
width: 160px;
background: white;
float: left;
position: relative;
margin-top: 0px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
box-shadow: 0 1px 6px rgba(0,0,0,.15);
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.dropOut ul {
float: left;
padding: 10px 0;
}
.dropOut ul li {
text-align: left;
float: left;
width: 125px;
padding: 12px 0 10px 15px;
margin: 0px 10px;
color: #777;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .1s ease-out;
-moz-transition: background .1s ease-out;
-ms-transition: background .1s ease-out;
-o-transition: background .1s ease-out;
transition: background .1s ease-out;
}
.dropOut ul li:hover {
background: #f6f6f6;
}
ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }
/*Search Bar Starts Here*/
#tw-form-outer {
float: right;
position: absolute;
right: 1.8em;
top: 1em;
}
#tw-form{
margin-top: 1em;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border: #aaa 1px solid;
background: #DDDDDD;
background: -moz-linear-gradient(top, #C4C4C4 0%, #EAEAEA 0%, #D3D3D3 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C4C4C4), color-stop(0%,#EAEAEA), color-stop(100%,#D3D3D3)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C4C4C4', endColorstr='#D3D3D3',GradientType=0 ); /* ie */
width: 83%;
float: left;
padding: 0 4px;
border-top-left-radius: 4px 4px;
border-top-right-radius: 4px 4px;
border-bottom-right-radius: 4px 4px;
border-bottom-left-radius: 4px 4px;
}
#tw-form #tw-input-text{
width: 80%;
float: left;
border: 0;
background: #DDDDDD;
background: -moz-linear-gradient(top, #C4C4C4 0%, #EAEAEA 0%, #D3D3D3 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C4C4C4), color-stop(0%,#EAEAEA), color-stop(100%,#D3D3D3)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C4C4C4', endColorstr='#D3D3D3',GradientType=0 ); /* ie */
color: #777;
line-height: 100%;
font-size: 0.8em;
font-family: font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
margin-top:3px;margin-bottom:3px;
height:20px;
}
#tw-form #tw-input-text:focus{
outline:none;
color:#333;
}
#tw-form #tw-input-submit{
background: url(search-zoom-icon.png) no-repeat 10px 5px;
border: 0;
float: left;
width: 22px;
z-index: 100;
cursor: pointer;
}
/*Search Bar Ends Here*/
#socialicons {
position: relative;
float: right;
right: 13.5em;
}
.logo {
float: left;
position: absolute;
left: -27.5em;
top: -22em;
z-index: 9000;
}
所以“关于我们”菜单应该下拉，当我在一个文件中单独尝试它时，它可以完美运行，但是一旦我添加了图像，它就会停止工作。