希望子菜单项时，自动换行比宽度更长(Want submenu item to wrap when t

我的工作建立在下划线WP主题的基本结构部位。我有文字的长线子菜单项。我想，如果行超出李的宽度文本自动换行。（我想要的效果可以在youthconnectionwilmette.org可以看到在“方案”）

以下是我现在已经在puckpros.edkatzman.com下“计划的经验教训。” 第一个子菜单项应该读“新客户：评估和课程 - 50折”，但它在获得截断“新客户：评估和”

我的WP生成html是：

<nav class="site-navigation main-navigation" role="navigation">
  <h1 class="assistive-text">Menu</h1>
  <div class="assistive-text skip-link">
    <ul id="menu-puckpros" class="menu">
      <li id="menu-item-798" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-798">
        <li id="menu-item-866" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-866">
          <a href="https://server21.securedata-trans.com/ap/discoverymarketingt/index.php?page=10">Schedule Lessons</a>
          <ul class="sub-menu">
            <li id="menu-item-924" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-924">
              <a href="https://server21.securedata-trans.com/ap/discoverymarketingt/index.php?page=10">New Customer: Evaluation & Lesson – 50% OFF</a>
            </li>
          </ul>
        </li>
      </li>
    </ul>
  </div>
</nav>

而我使用的CSS是：

.main-navigation {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: 30px;
    background-color: #00497e;
    clear:both;
    width: 100%;
}

.main-navigation li {
    float: left;
    height: 30px;
    line-height: 30px;
    display: block;
    position:relative;
}

.main-navigation li a {
    display:block;
    color:#fde218;
    text-decoration:none;
    height: 30px;
    line-height: 30px;
    padding: 0 70px;
}

.main-navigation a:hover {
    color: #004973;
    background-color: #fde218;
}

.main-navigation ul ul li {
    float: left;
    width: 150px;
    background-color:maroon;
    top: 5px;
    position:relative;
    display:block;  
}

.main-navigation ul ul li a {
    background-color:#00497e;
    color: #ffffff;
    width: 200px;
    display:block;  
}

我已经尝试了不同的显示值：，但没有发现任何有什么差别，除了显示：表细胞; 它包装在第二子菜单选择，但分裂最上面的一个和第三个菜单项下面把它的一部分。

我必须失去了一些东西简单，但google搜索和尝试，我发现有任何建议了几个小时后，没有什么工作。（我看了一下，在萤火虫工作网站的CSS，但我看不出换行正在取得在哪里发生。）

的关键是使基于列表的菜单：

1 - 不风格列表（比显示，位置和浮子和清理边距和填充其他）

2 -使用display:block ，并把所有理发的A-标签（这包括你的悬停和活动状态）。

你把一个高度上的一切。如果你想两条线，你需要高度自动增长。