مشكل در كد css

ميخام بالاي صفحه منو بندازم با چندتا عكس كوچيك بينش ك جزو منو هست ولي نوشته پايينتر ميوفته
كد html:

<div class="menubar">
<ul class="menu">
    <li>CORONAVIRUS</li> <img class="img1" src="pics/jjgytfu4678.jpg">
    <li>LONDON/</li> <img class="img2" src="pics/slabaksjb564.jpg">
    <li>AFRICA  </li>
    <li>ASIA  </li>
    <li>AUSTRALASIA  </li>
    <li>EUROPE  </li>
    <li>LATIN AMERICA  </li>
    <li>MIDDLE EAST  </li>
    <li>NORTH AMERICA  </li>
    <li>LIFE  </li>
    <li>SPORT  </li>
    <li>ESPORTS  </li>
    <li>BUSINESS  </li>
    <li>VIDEO  </li>
</ul>
</div>

كد css:

.menubar{
    direction:ltr;
    text-align:left;
    border:0% solid #f4f4f2;
    background-color:#f4f4f2;
}
.menu li{
    display:inline-block;
    list-style:none;
    margin-top:0px;
    height:38px;
    width:auto;
}
.menu{
    font-size:14px;
    border:opx solid white;
    padding:0px;
    margin-top:10px;
    height:38px;
}
.img1 , .img2{
    display:inline-block;
    height:38px;
    width:auto;
}