0

サイドバーメニューを正しいライブバージョンで同じように見せようとしていますが、テストバージョン（ページを表示）でアイテムをホバーすると境界線と重なるように正しく機能します

ライブバージョンのサイドバーメニューは次のようになります（ページを表示）

ホバー機能が境界線と重なっているように見えるようにする方法は、サイドバー領域の幅を広げてから手動でメニューを配置することだと思いますか？それが理にかなっているなら、私は以下のいくつかのコードを持っていますか？

<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

上で概説したこれらの2つのビットを見て、それがあなたが望むものにどれだけ近づいているかを確認することから始めます。

本番環境で使用されているCSSとHTMLをコピーすることもできます（LIVEサイト）...

于 2012-10-31T15:01:14.400 に答える