Want submenu item to wrap when text longer than width

问题

I am working site built on the basic structure of the underscores WP theme. I have a submenu item with a long line of text. I want the text to automatically wrap if the line exceeds the width of the li. (The effect I want can be seen at youthconnectionwilmette.org under "programs")

Here is what I have now, at puckpros.edkatzman.com under "Schedule Lessons." The first submenu item is supposed to read "New Customers: Evaluation and Lesson - 50% Off" but it's getting truncated at "New Customers: Evaluation and"

My WP generated html is:

<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>

And the css I'm using is:

.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;  
}

I've tried different value for display:, but have found nothing that makes any difference, except display: table-cell; which wraps the second submenu choice but splits the top one and puts part of it below the third menu item.

I must be missing something simple, but after a few hours of googling and trying any suggestions I found, nothing works. (I looked at the css of the site that works in Firebug, but I couldn't see where the line wrap is being made to happen.)

回答1:

The key to making list-based menus:

1 - DO NOT STYLE THE LIST (other than display, position and float and clearing margins and padding)

2 - Use display:block and put ALL STYLING on the A-tag (this includes your hover and active states).

You are putting a height on everything. If you want two lines, you need the height to grow automatically.

来源：https://stackoverflow.com/questions/15074811/want-submenu-item-to-wrap-when-text-longer-than-width

标签

html

css

submenu

word-wrap