WordPress模板的棘手菜单（HTML+；CSS）

我们有上面的菜单。我需要为WordPress模板构造的。我不知道如何使悬停和活动状态。直到现在我有了这个：

HTML（遵循WordPress生成代码的方式）：

就这些。在这里我被绊倒了。这些斜杠是这个菜单的缺点

---

有什么想法吗？

以这种方式制作图形：

黄色代表透明的颜色。

---

然后将负边距添加到

，这样它们将彼此相邻，没有空格。

要使活动状态，您必须向菜单中添加一些php以检查当前站点：

<nav id="nav-main" role="navigation">
<div class="menu-primary-navigation-container">
    <ul id="menu-primary-navigation" class="menu">
        <li  <?php if (is_page('home')) { echo "class='active'"; }?> >
            <a href="#" title="">
                Home
            </a>
        </li>
        <li  <?php if (is_page('menulink')) { echo "class='active'"; }?> >
            <a href="#" title="">
                Menu Link
            </a>
        </li>

这不只是一个好的切入点吗？为菜单元素提供平滑不透明度的曲线边，这样相邻的两个元素将为您提供渐变斜线。我想向您展示准备好的示例，但我担心我的“艺术”技能相当差。
#nav-main {
    width: 956px;
    height: 44px;
    border: 1px solid #a5a5a5;
    background: url(images/bg-nav-main.jpg) repeat-x;
}
    .menu-primary-navigation-container {}
        #menu-primary-navigation {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
            #menu-primary-navigation li {
                height: 44px;
                display: inline-block;
            }
                #menu-primary-navigation li a {
                    color: #ffffff;
                    font-family: Arial, Helvetica, sans-serif;
                    font-weight: bold;
                    font-size: 16px;
                    text-decoration: none;
                    line-height: 44px;
                    padding: 0 46px;
                }
                    #menu-primary-navigation li a:hover {}

<nav id="nav-main" role="navigation">
<div class="menu-primary-navigation-container">
    <ul id="menu-primary-navigation" class="menu">
        <li  <?php if (is_page('home')) { echo "class='active'"; }?> >
            <a href="#" title="">
                Home
            </a>
        </li>
        <li  <?php if (is_page('menulink')) { echo "class='active'"; }?> >
            <a href="#" title="">
                Menu Link
            </a>
        </li>