Style not staying

I am having a strange problem with my menu. Under “photos” i have a sub menu and there is a pseudo class that adds a triangle at the top of it.

#mainMenu ul li li:first-child a:after{
    content: '';
    position: absolute;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 14px solid #FFF;
}

This was working and now it just stopped. When I look at the CSS with firebug, the left and right border are not showing up. If I add them in firebug the same way I have written in my CSS file the triangle appears. I also noticed that when I view the source code from the browser a # is showing before transparent, I think this is some how causing the problem. However this does not exist in my code! Could someone tell me what’s going on???

thanks

https://danielpaymar.com