How to fix CSS menu bug - html

Question

I have a CSS3 Menu. When a menu items text is too long the design breaks. I want the text to simply move up to fit
the text. For example: At www.casa.gov.au the menu item text REGULATIONS AND POLICY starts higher than the rest
of the items. This prevents the menu width and height changing to fit the larger text.
How would I go about doing this with the menu attached in the JS FIDDLE: http://jsfiddle.net/UU4rm/
The problem is associated with the line height at #css li a { }
CSS CODE
/* MENU */
#cssmenu {
border:none;
border:0px;
margin:0px;
padding:0px;
font-size:12px;
font-weight:bold;
border-bottom: solid 1px rgb(77,77,77);
}
#cssmenu ul {
background:#333333;
height:39px;
list-style:none;
margin:0;
padding:0;
display: table;
width: 100%;
}
#cssmenu li {
padding:0px;
display: table-cell;
width: 115px;
}
#cssmenu li a {
background:#333333 url('../images/seperator.gif') bottom right no-repeat;
color:#FFF;
display:block;
font-weight:normal;
line-height:39px;
margin:0px;
padding:0px 0px;
text-align:center;
text-decoration:none;
width: 115px;
}
#cssmenu li a:hover,
#cssmenu ul li:hover a,
#cssmenu li a:focus,
#cssmenu ul li:focus a{
background: #2580a2;
color:#FFFFFF;
text-decoration:none;
float: none;
}
#cssmenu li ul {
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:230px;
z-index:200;
/*top:1em;
/*left:0;*/
}
#cssmenu li.force-show ul,
#cssmenu li:hover ul,
#cssmenu li a:focus + ul{
display:block;
}
#cssmenu li li {
background:url('../images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:230px;
}
#cssmenu li:hover li a,
#cssmenu li:focus li a {
background:none;
}
#cssmenu li ul a {
display:block;
height:35px;
font-size:11px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
width: 205px;
}
#cssmenu li ul a:hover,
#cssmenu li ul li:hover a,
#cssmenu li ul a:focus,
#cssmenu li ul li:focus a{
background:#2580a2 url('../images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
width: 205px;
}
#cssmenu p {
clear:left;
}
:focus {
outline:none;
}
::-moz-focus-inner {
border:0;
}
HTML CODE
<div id="cssmenu"> <ul> <li>Home</li>
<li class="has-sub"> Operations <ul>
<li>Individuals
</li>
<li>Aircraft owners
</li>
<li>Aircraft operators
</li>
<li>Flight training
</li>
<li>Aerodromes
</li>
<li>Office of airspace regulation
</li>
<li>Sport aviation
</li>
<li>Class D
</li>
<li>Non-towered aerodromes
</li>
<li>Dangerous goods
</li>
<li>Ground operations
</li>
<li>Non-compliance notice
</li>
<li>Unmanned Aircraft Systems (UAS)
</li>
<li>General Aviation (GA) task force
</li>
<li>Regional Aviation Safety Forum (RASF)
</li>
<li>Drug and Alcohol Management Plans
</li>
</ul></li>
<li class="has-sub"> Airworthiness <ul>
<li>Maintenance regulations
</li>
<li>Personnel
</li>
<li>Certification and design
</li>
<li>Manufacturing
</li>
<li>Continuing airworthiness
</li>
<li>Airworthiness directives
</li>
<li>Maintenance organisations
</li>
<li>Flight test and evaluation
</li>
</ul></li>
<li class="has-sub"> Regulations & Policy <ul>
<li>Current rules
</li>
<li>Changing the rules
</li>
<li>Enforcement action
</li>
<li>Policy notices
</li>
<li>Australia's state safety program
</li>
<li>Performance based navigation (PBN)
</li>
<li>Licensing regulations
</li>
</ul></li>
<li class="has-sub"> Manuals & forms <ul>
<li>Manuals
</li>
<li>Forms
</li>
<li>CASA online store
</li>
<li>Temporary Management Instructions (TMIs)
</li>
</ul></li>
<li class="has-sub"> Education <ul>
<li>AviationWorx
</li>
<li>eLearning catalogue
</li>
<li>Flight Safety Australia
</li>
<li> Pilot guides and information
</li>
<li>OnTrack
</li>
<li>Human factors
</li>
<li>Safety management systems
</li>
<li>Seminars and workshops
</li>
<li>Aviation safety advisers
</li>
<li>Advice for air travellers
</li>
<li>CASA online store
</li>
<li>Out-n-Back
</li>
</ul></li>
<li class="has-sub"> Services <ul>
<li>Licences & registrations
</li>
<li>Self Service Portal
</li>
<li>Service standards & fees
</li>
<li>Permission application centre (PAC)
</li>
<li>Aviation medicals
</li>
<li>Delegates and authorised persons
</li>
</ul></li>
<li class="has-sub"> About CASA <ul>
<li>Contact CASA
</li>
<li>CASA board
</li>
<li>CASA's Director
</li>
<li>Recent media releases
</li>
<li>Corporate publications
</li>
<li>CASA on Twitter
</li>
<li>Corporate policy
</li>
<li>Careers at CASA
</li>
<li>Research and statistics
</li>
</ul></li>
</ul>
</div>

Answer 1

It looks to me (in FF), that it's the bottom border attribute that's causing a goofy black line under your menu.
#cssmenu {
border-bottom: solid 1px rgb(77,77,77);
}
Eliminating that bottom border attribute, and adding addition text to the menu items (causing a wrap/second line) acted as expected.