Triangle created using borders looks weird in firefox 30.0

Question

I've created a menu for my website. On hovering over each one, a triangle created using borders will appear above the text. However using Firefox 30.0, that triangle looks a little bit ragged. I have no idea what the problem is, so I'm coming to you guys for help.

Here's the HTML:

<nav class="nav" role="navigation" id="ilt-main-nav">
    <ul id="main" class="menu">
        <li id="main-home" title="Go to Home Page" class="menu-item" onmouseout="document.body.style.cursor='default';" onmouseover="document.body.style.cursor='pointer';">    <a href="#">Homepage</a>    
            <div class="nav-triangle"></div>
        </li>
        <li id="main-learn" title="Learn" class="menu-item" onmouseout="document.body.style.cursor='default';" onmouseover="document.body.style.cursor='pointer';"> <a href="#" title="Learn">Learn</a>

            <div class="nav-triangle"></div>
        </li>
        <li id="main-find" class="menu-item" onmouseout="document.body.style.cursor='default';" onmouseover="document.body.style.cursor='pointer';">    <a href="#" title="Find">Find</a>   
            <div class="nav-triangle"></div>
        </li>
        <li id="main-help" title="Help" class="menu-item" onmouseout="document.body.style.cursor='default';" onmouseover="document.body.style.cursor='pointer';">   <a href="#" title="Help">Help</a>   
            <div class="nav-triangle"></div>
        </li>
        <li id="main-search" title="Search" class="menu-item" onmouseout="document.body.style.cursor='default';" onmouseover="document.body.style.cursor='pointer';">   <a href="#" title="Search">Search</a>   
            <div class="nav-triangle"></div>
        </li>
    </ul>
</nav>

Here's the CSS:

#main {
    position: relative;
    margin: auto;
    padding: 0;
    width: 100%;
}
#main a {
    color: #ACA2A2;
    display: inline-block;
    padding-top: 15px;
    font-weight: bold;
    font-size: 15px;
    text-decoration: none;
    width: 100%;
}
#main a:hover {
    color: #4CC3F1;
}
#main-find a {
    border-top: 8px solid #F68E55;
}
#main-find div {
    display: none;
    border-top: 8px solid #F68E55;
}
#main-find a:hover + div {
    display: block;
}
#main-help a {
    border-top: 8px solid #F26955;
}
#main-help div {
    display: none;
    border-top: 8px solid #F26955;
}
#main-help a:hover + div {
    display: block;
}
#main-search a {
    border-top: 8px solid #b66763;
}
#main-search div {
    display: none;
    border-top: 8px solid #b66763;
}
#main-search a:hover + div {
    display: block;
}
#main-home a {
    border-top: 8px solid #3CAE8B;
}
#main-home div {
    display: none;
    border-top: 8px solid #3CAE8B;
}
#main-home a:hover + div {
    display: block;
}
#main-learn a {
    border-top: 8px solid #C0DC8F;
}
#main-learn div {
    display: none;
    border-top: 8px solid #C0DC8F;
}
#main-learn a:hover + div {
    display: block;
}
#main-players a {
    border-top: 8px solid #68C187;
}
#main-players div {
    display: none;
    border-top: 8px solid #68C187;
}
#main-players a:hover + div {
    display: block;
}
#main-home:hover, #main-find:hover, #main-players:hover, #main-help:hover, #main-learn:hover {
    padding:0px;
}
#main li {
    background: none repeat scroll 0 0 #FFFFFF;
    display: block;
    float: left;
    height: 60px;
    list-style-type: none;
    padding-bottom: 0px;
    text-align: center;
    width: 20%;
}
#main a {
    background: transparent;
}
#main .ilt-player-menu-current {
    width:0px;
    display:none;
}
.nav-triangle {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    height: 0;
    margin: 0 auto;
    padding-top: -40px;
    position: relative;
    top: -40px;
    width: 0;
}
.nav {
    z-index: 0;
    height:80px;
}
.nav ul {
    border:0px;
}
.nav li {
    padding: 0px;
}
.nav {
    color: white;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
    z-index: 15;
}
.nav ul {
    background-color: #3dae8a;
    text-align: center;
    position: absolute;
    width:100%;
    z-index: 16;
}
.nav li {
    text-align: center;
    width:100%;
    list-style-type: none;
}
.nav .ilt-player-menu-current {
    display: block;
    text-align: center;
    width:100%;
}
.nav a {
    text-align: center;
    display: block;
    width:100%;
}

I also have it set up on JSFiddle: http://jsfiddle.net/3z3wD/ ON JSFiddle, it's kinda hard to see the triangle though. I do know that this is a css issue, but I don't know how to fix it.

Answer 1

It would be easier to set li as position:relative and set your triangle within in absolute: DEMO

.nav-triangle {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    height: 0;
    margin: 0 auto;
    position: absolute;/* nail it where you want ! with coordonate and eventually margins , parent is in relative*/
    top:8px;/*width of colored top border */
    left:50%;
    margin-left:-10px;
    z-index:1;
    width: 0;
}

.nav li {
    text-align: center;
    width:100%;
    list-style-type: none;
    position:relative;/* for absolute child */
}