Menü mit CSS, soll PFEIL und einen Art Knick haben

[Limpi]

Hallo liebe Fachleute und Semiprofis!

Ich habe ein Problem, bei dem ich nicht weiter komme. Ich habe mit css ein Menü erstellt. Jeder Feld, Link soll sich bei eime HOVER in einen Pfeil verwandeln. Der nach rechts zeigt weiter, soll auf der linken seite der Pfeil etwas verlängert sein und einen ART Knik nach unten haben.

Folgende Dinge bekomme ich nicht hin. Ersten soll beim HOVER mein FELD 2 Pixel höher sein, eines oben eine unten so das der Rahmen (Border) überschrieben wird. und der Knick der nach unten zeigt. Siehe Bild (KNICK, ZACKEN)

Mein ganzes Menü ist unter

http://www.cssdesk.com/DPvwD

sichtbar.

Limpi

* {
  margin: 0;
	padding: 0;
	border: 0;
	font-family: 'PT Sans Narrow',sans-serif,Arial,Helvetica;
	font-size: 22px;
	line-height: 35px;

}

#menu{
  margin:100px 0 0 100px;width:30%;
}


#menu ul{margin: 0;padding: 0;list-style: none;width:100%; position: relative;}
#menu li{border-top: 1px solid #000; position: relative;}
#menu a{display:block;padding:7px 0 7px 5%;text-decoration: none;background:#F7F4E8;font-size: 90%; position: relative;}
#menu li li a{padding:7px 0 7px 15%; position: relative;}
#menu li li li a{padding:7px 0 7px 25%; position: relative;}

#menu a.active{background: #f3eed9;}

#menu a:hover{background:#ff0000;font-weight: bold;color:#fff;}



#menu a:hover:after {
  position: absolute;
  right: -16px;
  top: 6px;
  width: 36px;
  height: 36px;
  background: #ff0000;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  content: "";
}

#menu a:hover:before {
  position: absolute;
  left: -20px;
  top: 0;
  width: 20px;
  height: 49px;
  background: #ff0000;
  content: "";
}