Выравнивание текста и еще несколько вопросов?

Question

[Porebro]

Есть такой кусочек кода.

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

Вопрос №1

Как выравнять текст по вертикали относительно картинки? Перепробовал кучу способов , но пока дело не идет.

Вопрос №2

Если у меня несколько подсписков ul , то я каждому должен задавать list-style: none ,чтобы избавиться от нумерации и обозначений. Или есть более универсальный способ?

Вопрос № 3

Пытаюсь сделать элемент смены языков . То есть изначально у меня есть один видимый элемент, при наведении на этот элемент под ним появляются например еще 3. Пытаюсь использовать способ с выпадающим меню, есть ли способ сделать эта без применения дополнительных ul тегов. То есть например вот так:

<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>

Comments

[Алекс К]

нет кода/вопроса

Answer 1

[Pavel Torbeev]

ответ №1 vertical-align: middle. Картинка и текст должны быть инлайн элементами
ответ №2 прописываете ul {list-style: none} глобально
ответ №3 Добавьте остальным li, кроме первого display:none, а при ul:hover li {display:block}