为什么我的导航栏不突出显示？

Question

为什么第一个菜单没有突出显示，或者最后两个是。我相当肯定它与图像有关，但如果它确实如此，我不知道如何解决它。

我的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; 
} 

所以关于我们菜单应落下，当我尝试在一个文件本身就可以工作但是一旦我添加图像就停止工作。

Answer 1

你的形象是在你的内容 改变标志z-index 0送其背后

.logo { 
    float: left; 
    position: absolute; 
    left: -27.5em; 
    top: -22em; 
    z-index: 0; 
} 

这里是一个fiddle背后