用ul下拉变换倾斜乱码

Question

我倾向于顶级菜单，但它对子菜单有影响，就像你悬停时一样，但是当你将鼠标悬停在项目上时，它会消失。

http://www.fi-testing.co.uk/birchfield/

请查看＆＃39;产品＆＃39;。

nav.top-bar {
    background: transparent;
}
nav.top-bar section ul#menu-topmenu li.menu-item {
    background: #2b80a7;
    text-align: center;
    zfloat:left;
  /* box-shadow */
    -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
    -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
    box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -o-transform: skew(-20deg);
    margin-right: 5px;
}

nav.top-bar section ul#menu-topmenu li a {
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -o-transform: skew(20deg);
    display: block;
    background: transparent;
    text-transform: uppercase;
    letter-spacing: 2px;
}

nav.top-bar section ul#menu-topmenu li:hover {
    background-color: #20556f;
}

如果从li.menu-item中删除了倾斜，则导航有效。我试过添加偏差：20deg到ul.dropdown希望它会反击它，但无济于事。有什么指针吗？非常感谢。