css - 水平菜单中 float 项左侧的额外空间

Question

我正在尝试创建一个水平顶部标题，其中一个主导航堆叠在一个子导航之上。两个导航都是使用 <ul> 创建的 float <li>元素。子导航左侧有额外的水平空间，其原因我无法辨别(参见下图中的红色圆圈区域):

这是一个 fiddle :http://jsfiddle.net/W3qqh/

问题

1. 是什么造成了空间？
2. 如何消除空格？

如果您认为我的方法可以改进，也可以随意提出其他替代方案来实现所需的菜单。

HTML

<div class="header">
  <div class="home-logo"><a href="/">HOME</a></div>
  <div class="main-nav">
    <ul>
      <li><a>Explore</a></li>
      <li><a>Earn</a></li>
      <li><a class="selected">Merchants</a></li>
    </ul>
  </div>

  <div class="sub-nav">
    <ul>
      <li><a>Be Secure</a></li>
      <li><a>Get Help</a></li>
      <li><a>Contact Us</a></li>
    </ul>
  </div>

</div>

CSS

* { box-sizing: border-box; }

.header { height:99px; width: 100%; position:fixed;}
.header.glass {opacity: 0.8; filter: alpha(opacity=80);}
.home-logo { background: pink; height:99px; width: 239px; position: fixed; }

.main-nav { color: white; position: relative; left:239px; background: #25c0df; height: 66px; line-height:66px; padding: 2px; width: 100%; text-transform: uppercase; font-size: 14px;}
.main-nav ul { height: 0; padding: 0; margin: 0; list-style-type: none; }
.main-nav li { float:left; margin-left: 40px;}
.main-nav li a.selected { border-top: 2px solid white; }
.main-nav li a:hover { border-top: 2px solid white; }

.sub-nav { font-size: 12px; color: #4ebeb2;  background: #26b; height: 33px; line-height: 33px; width: 100%; text-transform:uppercase; }
.sub-nav ul { height: 0; padding: 0; margin: 0; list-style-type: none; }
.sub-nav li { float:left; margin-left: 40px;}

Answer 1

在.sub-nav , 添加:

float:left;
position:relative;
left:239px;

在.main-nav , 添加:

float:left;

解决方案:您必须添加 float:left;在两个.main-nav和 .sub-nav你必须添加 position:relative;和 left:239px;因为左边的标志。

只要有 float:left; 就可以解决您的问题但你需要添加 position和 left .否则，您的文字将位于 Logo 后面。

JSFiddle Demo

更新

在.main-nav ，你有:

padding: 2px;

如果您删除它并添加 position和 left在 .sub-nav , 你不需要 float属性(property)。

JSFiddle Demo