0

我试图让侧边栏菜单在正确的实时版本上看起来相同，但工作正常，因此它在测试版本（查看页面）上与项目悬停时的边框重叠

Live 版本的侧边栏菜单如下所示（查看页面）

我猜想让悬停功能看起来像是与边界线重叠的方法是增加侧边栏区域的宽度，然后手动定位菜单？如果这有助于有意义，我在下面确实有一些代码？

<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);}

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

4

1 回答 1

0

您可以从查看此文件的第 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（LIVE 站点）...

于 2012-10-31T15:01:14.400 回答