Question

我正在尝试让侧边栏菜单在正确的Live版本上看起来相同，但是正确地工作以便在项目悬停时重叠边框，在测试版本上View Page）

Live版的侧边栏菜单如下所示（View Page）

我猜测让悬停功能看起来像是重叠边框线的方法是增加补充工具栏区域的宽度然后手动定位菜单？如果有合理意义的话，我确实有下面的代码吗？

<div id="mod_sidebar">
    <?php if ( ! dynamic_sidebar( 'Sidebar' )) : ?>
    <ul>

        <li id="sidebar-nav" class="widget menu">
            <h3><?php _e('Navigation'); ?></h3>
            <ul>
                <?php wp_nav_menu( array( 'theme_location' => 'sidebar-menu' ) );?>
            </ul>
        </li>

    </ul>
    <?php endif; ?>
</div><!--mod_sidebar-->

    #mod_sidebar {
        float: left;
        width: 202px;
        /*background-color: #F96;*/
        background: url(images/sidebar-bg.jpg);
        background-repeat: no-repeat;
    }
        #mod_sidebar .widget-area {
            padding-bottom: 20px;
            margin-bottom: 20px;
        }
            #mod_siebar ul,
            #mod_sidebar li {
                padding: 0;
                margin: 0;
                list-style: none;
            }
                #mod_sidebar .children {
                    padding-left: 10px;
                }
                    #mod_sidebar .children .children {
                        padding-left: 10px;
                    }

CSS位于

之下

#mod_sidebar,
    #mod_sidebar ul {list-style: none; padding: 0; margin: 0;}
    #mod_sidebar a {display: block; padding: 10px; width: 210px; font-size: 13px; color: #174267;}
    #mod_sidebar li {float: left; width: 190px; background-color: #F4F8Fa; border-top: 1px solid #c3ced5;}
    #mod_sidebar li:hover {background: url(images/hover_bg.png);}
    #mod_sidebar li ul {position: absolute; width: 210px; left: -999em; background-color: #1662a7;}
    #mod_sidebar li:hover ul {left: auto; background: url(images/hover_bg.png);}

如果可能，只需要一些指导！再次感谢！

Answer 1

您可以从查看此文件的第3904行开始：http://cdn.snowflakesoftware.com/wp-content/themes/twentyeleven/style.css（属于具有您似乎想要的布局的网站的样式表。

请注意，他们在这里做了一些事情：

1）使用负边距。所以在菜单项上悬停和活动状态：

.side-menu a.active, .side-menu a:hover

元素的右边距为17px：

margin-right: -17px;

2）此表中的CSS也提供a.active和a：悬停以下背景图像：http://cdn.snowflakesoftware.com/wp-content/themes/twentyeleven/images/hover_bg.png

首先看看上面列出的这两个位，看看它能让你达到你想要的程度。

您也可以只复制正在制作中使用的CSS和HTML（LIVE网站）......

WordPress边栏菜单CSS样式和定位

1 个答案: