导航菜单与 css 对齐

Question

我正在尝试根据 Skype 网站上找到的导航菜单制作一个导航菜单，但版本更简单。

所以菜单由 3 个项目组成。

1. 标志
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。

但你究竟没有实现了什么？ jsFiddle 看起来不错，但可能图像（丢失的）位置不正确。