Navigation Menu dropdown - css

Question

i am having a problem which is small but frustrating:
look at the top menu on my site: www.integratedphysicaltherapy.ie
the "Sports Injury Management" link seems to be a effected by its dropdown element in some way. Ive had a look but can't see whats causing it. Any help would be much appreciated.
here is the code
#header .header-links .sub-menu {
display: none;
float: left;
position: absolute;
z-index: 1111;
border: 0px solid #303030;
background: #1C1C1C;
}
#header .header-links .sub-menu a {
color: white;
font-size: 12px;
border-bottom: 0px solid #303030;
line-height: 22px;
margin: 0;
padding: 0 0px 0 10px;
}
#header .header-links .sub-menu li:last-child > a {
border: 0;
}
#header .header-links .sub-menu a:hover,
#header .header-links .sub-menu .current-menu-item a {
}
#pre-header .sub-menu li,
#header .sub-menu li {
float: none;
position: relative;
}
#header .sub-menu li {
padding: 2px 1px;
}
#header .sub-menu li:hover {
padding-left: 1px;
}
#header .menu > li > a {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#header .menu > li.menu-hover > a,
#header .menu > li.current_page_item > a,
#header .menu > li.current-menu-ancestor > a,
#header .menu > li > a:hover {
color: #F33F3F;
}
.main-navigation:after {
clear: both;
content: "";
display: block;
}
.main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
}
.main-navigation .sub-menu a {
white-space: nowrap;
}
.main-navigation .sub-menu .sub-menu {
position: absolute;
top: -1px;
left: 100%;
}
.main-navigation ul ul :hover > a {
}
#pre-header .main-navigation ul li:hover > ul,
#header .main-navigation ul li:hover > ul {
display: block;
}