Want submenu item to wrap when text longer than width - html

Question

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">
Schedule Lessons
<ul class="sub-menu">
<li id="menu-item-924" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-924">
New Customer: Evaluation & Lesson – 50% OFF
</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.)

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