0

私のサイトには2つの部分の問題があります

ナビゲーションメニューを添付の画像のように見せたいです。

サイドナビゲーションメニューの例

私が抱えている最初の問題は、ナビゲーションメニューをページの右側に表示させることです。余白を正しく設定していると思いますが、黄色い枠の右側に当たるとメニューが表示されません。

2つ目は、左側のサイト本体の後ろにある小さなバナーです。このための画像を作成しましたが、配置しようとすると、適切な場所に表示されません。今、私はそれを繰り返すように設定しているので、あなたはそれがどこにあるかを見ることができます（いくつかのファンキーなポジショニングと一緒に）。実際のメニューリンクの下に表示される部分を表示する方法はありますか？

4

3 に答える 3

1

この効果は、純粋なcssを使用して実現できます。

HTML

<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58" id="menu-item-58">
    <a href="http://ranchocordovaeventscenter.com/?page_id=57">Building Facts</a>
    <div>
       <div class="wrap-behind"></div>
    </div>
</li>

CSS

#extra-navbar .menu-item {
    margin-bottom: 0.9rem;
    margin-left: 20px;
}

.wrap-behind {
    background: none repeat scroll 0 0 #F9B233;
    border-left: 13px solid transparent;
    border-right: 1px solid #053053;
    border-top: 10px solid #053053;
    float: left;
    height: 0;
    width: 0;
}

#extra-navbar ul li {
    background-attachment: scroll;
    background-color: #104571;
    background-position: left bottom;
    background-repeat: no-repeat;
    color: #FFFFFF;
    overflow: visible;
}
于 2013-02-10T01:20:35.673 に答える
0

div #page にはクラス .site がoverflow: hidden;あり、最初の問題が発生するルールがあります

于 2013-02-10T01:08:53.797 に答える
0

1431 行目の style.css には、プロパティがありますoverflow: hidden。それを削除すると、メニューの左側にあるものが表示されます。それはあなたの問題の両方を助けるはずです。

于 2013-02-10T01:08:54.983 に答える