Text alignment and a few more questions?

Question

css

There is a piece of code.

<ul class="navigation">
      <li>
        <a href="#"><img src="images/rus.png" width="150" height="150px" alt=""> Russian</a>
      <ul>
        <li><a href="#"><img src="images/eng.png" width="150px" height="150px"  alt=""> English</a>
      </ul>	
      </li>
</ul>

.navigation{
    list-style: none;
    position: absolute;
    }

Question #1
How to vertically align text relative to an image? I tried a lot of ways, but so far it does not work.
Question #2
If I have multiple ul sublists, then I have to set list-style: none to each to get rid of numbering and designations. Or is there a more general way?
Question number 3
I'm trying to make an element of changing languages. That is, initially I have one visible element, when hovering over this element, for example, 3 more appear under it. I'm trying to use the method with a drop-down menu, is there a way to do this without using additional ul tags. That is, for example like this:

<ul>
          <li><a href="#">Rus</a></li>
          <li><a href="#">Eng Us</a></li>
          <li><a href="#">Italian</a></li>
          <li><a href="#">Spain</a></li>
          <li><a href="#">etc</a></li>
       
</ul>

Answer 1

answer #1 vertical-align: middle. Image and text must be inline elements
answer #2 write ul {list-style: none} globally
answer #3