html - 希望子菜单项在文本长于宽度时换行

Question

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

这是我现在拥有的，位于 puckpros.edkatzman.com 的“安排类(class)”下。第一个子菜单项应该显示为“新客户:评估和类(class) - 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;  
}

我已经尝试了不同的显示值:，但没有发现有任何区别，除了显示:表格单元格；它包装了第二个子菜单选项，但拆分了顶部菜单选项并将其一部分放在第三个菜单项下方。

我一定是遗漏了一些简单的东西，但是经过几个小时的谷歌搜索并尝试了我发现的任何建议之后，没有任何效果。 (我查看了在 Firebug 中运行的站点的 css，但看不到换行发生的位置。)

Answer 1

制作列表式菜单的关键:

1 - 不要设置列表的样式(显示、位置和 float 以及清除边距和填充除外)

2 - 使用 display:block 并将所有样式放在 A 标签上(这包括您的悬停和事件状态)。

您对所有事物都进行了高度评价。如果你想要两条线，你需要高度自动增长。