archiloni on "need to change navigation codes"

I'm working on a navigation menu, where i want to change the "selected status" at the same time as i'm using a "skew" in the css, the problem is that the selected element also skews the text, but i can't seem to target the text alone.

here is the html and css:

HTML:
<div class="nav">

<ul>
<li><a href="index.php">Forside</a></li>
            <?php wp_list_pages('title_li='); ?>
        </ul>
    </div>

Css:
.nav ul li{
    list-style-type: none;
    display: inline-block;
     color: #999999;
    text-decoration: none;
       width: 100px;
   height: 18px;
   background: #333;
   /* Skew */
   -webkit-transform: skew(-28deg);
   -moz-transform: skew(-28deg);
   -o-transform: skew(-28deg);
   transform: skew(-28deg);

}

.nav ul li a {
	font: bold 10px/20px Arial, Helvetica;
	text-decoration: none;
    float: left;
    width: 86px;
    padding: 0px 7px ;
    color: #999999;
     text-align: center;
       -webkit-transform: skew(28deg);
   -moz-transform: skew(28deg);
   -o-transform: skew(28deg);
   transform: skew(28deg);

}

.nav .current-menu-item > a,
.nav .current-menu-ancestor > a,
.nav .current_page_item > a,
.nav .current_page_ancestor > a{
	font-weight: bold;
        text-decoration: underline;
             color: #ffffff;
    text-decoration: none;
       width: 86px;
   height: 20px;
   background: #999999;
   -webkit-transform: skew(0deg,);
   -moz-transform: skew(0deg);
   -o-transform: skew(0deg);
   transform: skew(0deg);
}

The last part of the css skews all the html because of the "a" but that also makes the text in the nav menu skew and i can't find anywhere how to target the text alone.

Anyone got a clue?