帶-webkit轉換的平行四邊形菜單欄導致多個錯誤

Question

最近，我創建了一個導航欄，並使用-webkit-transform:skew(-30deg);和tweaks of the community將菜單項轉換爲平行四邊形。

現在，我嘗試修復CSS類.submenu的下拉菜單。 這是我迄今取得的進展：http://jsfiddle.net/an5mb2y3/1/

但也有一些錯誤我無法修復：

• 字體平滑：當我將鼠標懸停在下拉菜單項，字體變得模糊。又過了一秒鐘，字體變得清晰。我讀了關於使用 - webkit-font-smoothing: antialiased來解決這個問題，我試了一下，沒有成功。

• 另外，下拉菜單顯示在背景中，位於嵌入圖像後面。我想要在圖像的頂層顯示菜單。我所嘗試的是將z-index更改爲更大的價值。但它沒有奏效。

• 我想從懸停時平行四邊形開始的位置顯示子菜單。我在.submenu類上嘗試了margin-left: 42px;，但這不適用於兩個下拉菜單。

Answer 1

添加這個CSS下拉菜單了：

nav.nav-primary{z-index: 1; position: relative;}