Html 在CSS菜单中显示徽标

我想在我的导航菜单中放置一个徽标，如下所示。我尝试了很多代码，但都没能成功。代码可以在fiddle中找到

正文{
宽度：960px；
字体系列：“开放式Sans”，无衬线；
保证金：5px自动；
填充：0自动；
}
保险商实验室{
高度：60px；
宽度：100%px；
保证金：0自动；
填充：0；
列表样式类型：无；
}
李{
浮动：左；
宽度：240px；
}
ul a{
颜色：黑色；
文字装饰：无；
字号：19px；
显示：块；
}
ullia{
显示：块；
填充：20px 45px；
线高：1.0em；
文字装饰：无；
过渡时间：500ms；
}
ul li ul{
可见性：隐藏；
}
悬停{
颜色：黄色；
背景色：黑色；
}

您可以在最后一个

中添加徽标，如

<li><a href = 'info.html'>Toekomst</a></li>
<li><a href = 'contact.html'>Contact</a></li>
<li><a><img src="yourlogo.png"></a> </li>

如果您希望您的徽标与
完美匹配，请尝试以下方法：

HTML

<div class="navigation">
  <ul>
    <li><a href = 'index.html'>Home</a></li>
    <li><a href = 'media.html'>Media Design</a></li>
    <li><a href = 'innovatie.html'>Innovatieroutes</a>
    <li><a href = 'info.html'>Opleiding</a></li>
    <li><a href = 'info.html'>Fontys</a></li>
    <li><a href = 'info.html'>Toekomst</a></li>
    <li><a href = 'contact.html'>Contact</a></li>
    <li><img src="https://shopsocially.com/wp-content/uploads/2014/10/GreyBackground-48.jpg"></li>
  </ul>
</div>

还有另一种方法可以改善你的问题，你可以删除
overflow:hidden并设置：

img{
  width: 100%;
  /*new line*/
  height: 100%; /*Doesn't cut your img*/
}

你也可以看看

img{
  width: 100%;
  /*new line*/
  height: 100%; /*Doesn't cut your img*/
}