当文本长于宽度时，要包含子菜单项

Question

我的工作网站建立在下划线WP主题的基本结构上。我有一个带有长行文本的子菜单项。如果行超过li的宽度，我希望文本自动换行。 （我想要的效果可以在“程序”下的youthconnectionwilmette.org上看到）

这是我现在所拥有的，在puckpros.edkatzman.com的“Schedule Lessons”下。第一个子菜单项应该是“新客户：评估和课程 - 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;  
}

我尝试了不同的显示值：但是没有发现任何差别，除了显示：table-cell;它包装了第二个子菜单选项，但拆分了顶部菜单，并将其中的一部分放在第三个菜单项下面。

我必须遗漏一些简单的东西，但经过几个小时的谷歌搜索和尝试我发现的任何建议，没有任何作用。 （我查看了在Firebug中工作的网站的CSS，但我看不到线路包裹在哪里发生。）

Answer 1

制作基于列表的菜单的关键：

1 - 不要列出清单（显示，位置和浮动以及清除边距和填充除外）

2 - 使用display:block并将所有STYLING置于A-tag上（包括您的悬停和活动状态）。

你正在把所有事情都放在一边。如果你想要两条线，你需要自动增长的高度。