1

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

这是我现在在 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;  
}

我为 display: 尝试了不同的值，但除了 display: table-cell; 之外没有发现任何区别。它包装了第二个子菜单选项，但将顶部的选项拆分并将其一部分放在第三个菜单项下方。

我一定错过了一些简单的东西，但是经过几个小时的谷歌搜索并尝试了我发现的任何建议，没有任何效果。（我查看了在 Firebug 中工作的网站的 css，但我看不到换行的位置。）

4

1 回答 1

1

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

1 - 不要样式化列表（除了显示、位置和浮动以及清除边距和填充）

2 - 使用display:block并将所有样式放在 A 标记上（这包括您的悬停和活动状态）。

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

于 2013-02-25T19:43:07.243 回答