Настройка навигационного меню с помощью css

Question

Я пытаюсь создать меню навигации, основанное на найденном на сайте skype, но более простой версии.

Таким образом, меню состоит из 3-х предметов.

1. Logo
2. Меню навигации верхний ряд (2 шт, язык и специальная кнопка)
3. Меню навигации нижний ряд (5 шт)

Цель:
Моя окончательная цель состоит в том, чтобы получить два ряда друг над другом, чтобы выровнять правую сторону (которую я уже успел) и логотип слева. Далее логотип должен быть выровнен по нижнему ряду навигационного меню.

Смотреть картину: http://i39.tinypic.com/2qa2zys.png

HTML-КОД:

<nav> 
     <ul> 
     <li> 
      <img src="images/lang.png" alt="Language" /></a> 
     </li> 
     <li> 
     <a href="#" class="lang">NEDERLANDS</a> 
     </li> 
     <li> 
      <a href="#" class="special">SPECIAL</a> 
     </li> 
    </ul> 
     <a href="#"> <img src="images/logo.png" alt="Logo" class="logo"/></a> 
     <ul> 

     <li> 
      <a href="#" class="selected">HOME</a> 
     </li> 
     <li> 
      <a href="#" >HOE WERKT HET?</a> 
     </li> 
     <li> 
      <a href="#">HELP</a> 
     </li> 
     <li> 
      <a href="#">PRIJZEN & AANMELDEN</a> 
     </li> 
     <li> 
      <a href="#">INLOGGEN</a> 
     </li> 
    </ul> 
    </nav> 

CSS:

body { 
    width: 960px; 
    margin-left: auto; 
    margin-right: auto; 
    background: #f2f2f2; 
    font-family: Droid Sans ,Arial,'Liberation Sans',FreeSans,sans-serif; 
    line-height: 14px; 
    display:block; } 


header nav li { 
float:left; 
margin-right:50px; 
list-style: none; 
text-decoration: none; 
vertical-align: text-bottom; 
} 


header nav a { 
font-weight: bold; 
font-family: PT Sans; 
text-decoration: none; 
font-size: 14px; 
color: #333333; 
text-shadow: white 1px 1px 1px; 
} 

header nav a:hover, a:active { 
color: #0065f5; 
} 
header nav .selected { 
text-decoration:underline; 
} 

header nav ul { 
float: right; 
margin-top:10px; 
margin-bottom:10px; 
} 

.special { 
text-decoration:none; 
color: white; 
background: #0065f5; 
padding:5px 15px; 
text-shadow: #333333 1px 1px 1px; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
} 

.special:hover { 
color: #fed000; 
} 

.logo { 
float:left; 
margin-top: 30px; 
} 

Answer 1

Вы можете поплавка оставили логотип и дать margin-top с таким же количеством пикселей в качестве высоты языкового меню. Или используйте position: absolute.

Но что именно вы не achive? jsFiddle кажется прекрасным, но, возможно, изображения (которые отсутствуют) не расположены хорошо.