Why does the first mobile css menu item not position properly?

Question

I created my own CSS only mobile menu similar to slicknav but without the javascript required. Everything works properly (3 level menu) but the first item in the menu is not positioned as all of the rest of the items.

.menuV
{
     margin: 0; /*width: 100%;*/ float:none;
    width:130px;
    position:relative;
    z-index:4;
    font-family: Arial, Helvetica, sans-serif;
    list-style: none;
    padding: 0;
    top:26px;
    left:-53px;
    display:none;
    border: 2px solid #DDD;
    background: #FFF;    

}

.menuV li
{
    padding: 0;
    height: 36px;
    position: relative;    
}

I created a jsfiddle https://jsfiddle.net/hLene9a3/ that contains the all of the ul li menu items and all of the css. The css for hover/dropdown is too long to post here.

Any help would be greatly appreciated.

Answer 1

I don't know what causes this but putting position:absolute on it correct this. I can only test in FF here though. Try putting this on your css.

#menuFile > a{position:absolute;}