WordPress 侧边栏菜单 CSS 样式和定位

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:hover 提供以下背景图片:http://cdn.snowflakesoftware.com/wp-content/themes/twentyeleven/images/hover_bg.png

首先查看上面概述的这两个部分，看看它离您想要的有多近。

您也可以只复制生产中使用的 CSS 和 HTML(实时站点)...