Navigation Sub menu disappearing before i can click with wordpress

Navigation Sub menu disappearing before i can click with wordpress

I have tried a few things like playing with the ul top as well and the
padding and margins but have had no luck. The site is here
http://ellinayoga.com/
** Update ** I added the css code for the nav menu/subs/... (basically all
the code written for the nav). Let me know if this is not enough and if
the problem may be somewhere else ( I dont really think that is the case
but hey it might be)
Anyways thanks in advance for any help you can provide
/*-------------------------------------------------*
/* = Navigation
/*-------------------------------------------------*/
#navigation {
right: 30px;
bottom: 0px;
}
/*** ESSENTIAL Navigation Style ***/
.sf-menu,
.sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu { line-height: 1.0 }
.sf-menu ul {
position: absolute;
top: -999em;
width: 160px; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li { width: 100% }
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float: left;
position: relative;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0;
top: 40px; /* match top ul list item height */
z-index: 99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul { top: -999em }
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 180px; /* match ul width */
top: 0;
}
/*** navigation skin ***/
.sf-menu {
float: left;
margin-bottom: 1em;
}
.sf-menu a {
height: 40px;
line-height: 40px;
margin-left: 5px;
font-size: 28px;
text-transform: lowercase;
font-family: 'Give You Glory', cursive;
color: #000;
display: block;
text-decoration: none;
padding: 3px 10px 1px;
}
.sf-menu a:focus,
.sf-menu a:hover,
.sf-menu a:active {
display: block;
color: #fe4451;
padding: 3px 10px 1px;
}
#navigation .current-menu-item > a:first-child {
color: #fff;
}
/*Subs*/
.sf-menu ul{
margin-top: 15px;
padding: 0px;
-moz-opacity: 0.98;
-khtml-opacity: 0.98;
opacity: 0.98;
}
.sf-menu ul a{
margin: 0px;
padding: 0 10px;
}
.sf-menu ul a:focus,
.sf-menu ul a:hover,
.sf-menu ul a:active {
color: #333;
}
.sf-menu ul .current-menu-item a{
color: #333;
}
.sf-menu ul li{
border-bottom: 1px solid #eee;
}
.sf-menu ul li:last-child{
border-bottom: 0px;
}