导航栏中的重叠图像

Question

是否有可能重叠导航栏中的图像，而不会获取背景颜色和一些东西？图像或徽标本身不应具有任何背景色（即继承），并且应该与导航栏重叠。我正在寻找一个output like this.

This is the CodePen link, try it out

---

HTML代码：

<nav> 
    <ul> 
     <li> 
      <span class="logo"> 
       <img src="https://static.wixstatic.com/media/c86d4e_46042d8a0d99473f82209f03ab4dd146~mv2.gif" alt="Star of Hope" title="Star of Hope" id="logo">  
      </span> 
     </li> 
     <li><a href="" title="" class="active">Home</a></li> 
     <li><a href="" title="">Our School</a></li> 
     <li><a href="" title="">Academics</a></li> 
     <li><a href="" title="">Lesson and Quizzes</a></li> 
     <li><a href="" title="">Event &amp; News</a></li> 
     <li><a href="" title="">Grades</a></li> 
    </ul> 
</nav> 

CSS代码：

* { 
    margin: 0px; 
} 

nav { 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    font-weight: lighter; 
    font-size: 0.95em; 
    font-family: Century Gothic; 
    text-transform: uppercase; 
    list-style-type: none; 
    overflow: hidden; 
    background-color: #343F64; 
} 

ul {  
    margin: 0; 
    padding: 0; 
    width: 100%; 
} 

li { 
    display: inline; 
    float: left; 
} 

li a { 
    display: block; 
    padding: 14px 16px; 
    background-color: #343F64; 
    color: white; 
    text-decoration: none; 
    padding-top: 25px; 
    padding-bottom: 25px; 
} 

.active { 
    color: #E9DB89; 
} 

li img { 
    float: left; 

} 

img { 
    margin-left: 75px; 
} 

#logo { 
    float:left; 
    z-index: 1000; 
} 

Answer 1

我做了一个修改您的代码，以获得满意的结果

* { 
 
\t margin: 0px; 
 
} 
 

 
nav { 
 
\t width: 100%; 
 
\t height: 70px; 
 
\t text-align: center; 
 
\t font-weight: lighter; 
 
\t font-size: 0.95em; 
 
\t font-family: Century Gothic; 
 
\t text-transform: uppercase; 
 
\t list-style-type: none; 
 
\t overflow: hidden; 
 
\t background-color: #343F64; 
 
    position: relative;/*change here*/ 
 
} 
 

 
ul { \t 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t width: 100%; 
 
    position: absolute;/*change here*/ 
 
    right: -25%;/*change here*/ 
 
} 
 

 
li { 
 
\t display: inline; 
 
\t float: left; 
 
} 
 

 
li a { 
 
\t display: block; 
 
\t padding: 14px 16px; 
 
\t background-color: #343F64; 
 
\t color: white; 
 
\t text-decoration: none; 
 
\t padding-top: 25px; 
 
\t padding-bottom: 25px; 
 
} 
 

 
.active { 
 
\t color: #E9DB89; 
 
} 
 

 
li img { 
 
\t float: left; 
 

 
} 
 

 
img { 
 
\t margin-left: 75px; 
 
} 
 
.line { 
 
    width: 100%; 
 
    height: 50px; 
 
    border-bottom: 1px solid #111; 
 
} 
 
#logo { 
 
\t float:left; 
 
\t z-index: 1000; 
 
    position: absolute;/*change here*/ 
 
}

<!--move logo outside nav--> 
 
<span class="logo"> 
 
       <img src="https://static.wixstatic.com/media/c86d4e_46042d8a0d99473f82209f03ab4dd146~mv2.gif" alt="Star of Hope" title="Star of Hope" id="logo">  
 
      </span> 
 
<nav> 
 
\t \t <ul> 
 
\t \t \t <li><a href="" title="" class="active">Home</a></li> 
 
\t \t \t <li><a href="" title="">Our School</a></li> 
 
\t \t \t <li><a href="" title="">Academics</a></li> 
 
\t \t \t <li><a href="" title="">Lesson and Quizzes</a></li> 
 
\t \t \t <li><a href="" title="">Event &amp; News</a></li> 
 
\t \t \t <li><a href="" title="">Grades</a></li> 
 
\t \t </ul> 
 
\t </nav> 
 
<div class="line"></div>

Answer 2

这里的另一个变化中，不使用绝对定位：

HTML：

<div id="header_container"> 

    <div id="header"> 
     <div class="logo"> 
       <img src="https://static.wixstatic.com/media/c86d4e_46042d8a0d99473f82209f03ab4dd146~mv2.gif" alt="Star of Hope" title="Star of Hope" id="logo">  
      </div> 

     <div class="nav"> 
      <ul> 
       <li><a href="" title="" class="active">Home</a></li> 
       <li><a href="" title="">Our School</a></li> 
       <li><a href="" title="">Academics</a></li> 
       <li><a href="" title="">Lesson and Quizzes</a></li> 
       <li><a href="" title="">Event &amp; News</a></li> 
       <li><a href="" title="">Grades</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

CSS：

* { 
     margin: 0px; 
    } 

    #header_container { 
     width: 100%; 
     height: 100px; 
     background-color: #343F64; 
    } 

    #header { 
    margin: 0 auto; 
     width: 1200px; 

    } 

    .nav { 
     float: left; 
     margin-top: -100px; 
     margin-left: 350px; 
     height: 100px; 
     text-align: center; 
     font-weight: lighter; 
     font-size: 0.95em; 
     font-family: Century Gothic; 
     text-transform: uppercase; 
     list-style-type: none; 
     overflow: hidden; 
    } 

    ul {  
     margin: 0; 
     padding: 0; 
     width: 100%; 
    } 

    li { 
     display: inline; 
     float: left; 
    } 

    li a { 
     display: block; 
     padding: 14px 16px; 
     background-color: #343F64; 
     color: white; 
     text-decoration: none; 
     padding-top: 25px; 
     padding-bottom: 25px; 
    } 

    .active { 
     color: #E9DB89; 
    } 

    li img { 
     float: left; 

    } 

    img { 
     margin-left: 75px; 
    } 

    .logo { 
     float:left; 
     z-index: 1000; 
    }