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

Question

所以我们有上面的菜单。我需要为WordPress模板构建。我不知道如何制作悬停和活动状态。直到现在我还有这个：

HTML（遵循WordPress将如何生成代码）：

<nav id="nav-main" role="navigation">
    <div class="menu-primary-navigation-container">
        <ul id="menu-primary-navigation" class="menu">
            <li>
                <a href="#" title="">
                    Home
                </a>
            </li>
            <li>
                <a href="#" title="">
                    Menu Link
                </a>
            </li>
            <li>
                <a href="#" title="">
                    Menu Link
                </a>
            </li>
            <li>
                <a href="#" title="">
                    Menu Link
                </a>
            </li>
            <li>
                <a href="#" title="">
                    Menu Link
                </a>
            </li>
            <li>
                <a href="#" title="">
                    Menu Link
                </a>
            </li>
        </ul><!-- #menu-primary-navigation -->
    </div><!-- .menu-primary-navigation-container -->
</nav><!-- #access -->

然后我有CSS：

#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 {}

这就是全部。在这里，我被困住了。这些斜线是这个菜单的坏点。

有什么想法吗？

Answer 1

以这种方式制作图形：

黄色代表透明色。 然后向<li>添加负边距，这样它们就会彼此相邻而没有空格。

Answer 2

要进入活动状态，您必须在菜单中添加一些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>

有关详细信息，请参阅此处的教程：Tutorial

然后你必须为每个menubutton制作矩形图像，并为<li>元素定义它作为背景。您还可以为所有菜单元素制作一个。使用由wordpress设置的“active”类，您可以为活动菜单元素定义不同的背景。

对于菜单元素的悬停，您只需在css中添加背景定义即可 #menu-primary-navigation li a:hover {}