0

なぜ私のスタイルのいくつかが機能していないのですか。

一生懸命頑張っていますが、メニューに問題があります。

cssの最後の部分が機能していません。jsfiddle

メニューコンテンツにマウスを置くと、黒くしたいのですが...

#site_menu {margin-top:16px; height:33px; display:block; direction:rtl;}

ul.main_menu { margin:0px 20px 0px 20px; }
    ul.main_menu li {
        display:inline-block;
    color:#888;
    padding:9px 7px 9px 7px;
    position:relative;
}
ul.main_menu li:hover {
    display:inline-block;
    color:#FFF;
    cursor:pointer;
    background: #f18822;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fcb300), color-stop(100%, #fa9200));
    background-image: -webkit-linear-gradient(#fcb300,#fa9200);
    background-image: -moz-linear-gradient(#fcb300,#fa9200);
    background-image: -o-linear-gradient(#fcb300,#fa9200);
    background-image: linear-gradient(#fcb300,#fa9200);
    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    -o-background-clip: padding-box;
    -ms-background-clip: padding-box;
    -khtml-background-clip: padding-box;
    background-clip: padding-box;
    border-color: #ed842c;
    box-shadow: inset 0 1px 0 0 #f6af61;
    /*border-bottom:1px solid transparent;*/
}
    .main_menu li ul {
        position:absolute;
        width:160px;
        right:0px;
        top:33px;
        padding:5px;
        background:#FFF;
        display:inline-block;
        box-shadow: 4px 4px 0 0 rgba(35,35,35,0.1);
        border-top:2px solid #ed842c;
        border-bottom:1px solid #CCC;
    }
    .main_menu li ul li {
        display:list-item;
        background:#FFF;
        color:#888;
        padding:5px;
    }
    .main_menu li ul li:hover {
        color:#000;
        cursor:pointer;
    }

html

<div id="site_menu" class="fleft">
        <ul class="main_menu"><li>content
            <ul><li>content</li><li>طرح سوال</li><li>خرید و فروش</li><li>ثبت کتاب</li></ul>
        </li><li>قوانین سایت</li><li>حریم خصوصی</li><li>تماس با ما
            <ul><li>طراحی آزمون</li><li>طرح سوال</li><li>خرید و فروش</li><li>ثبت کتاب</li><li>طراحی آزمون</li><li>طرح سوال</li><li>خرید و فروش</li><li>ثبت کتاب</li></ul>
        </li></ul>
    </div>
4

3 に答える 3

0

メインメニューのホバープロパティの1つを削除しました。あなたはあなたのdisplay:inline-block上にいてul.main_menu li:hover、それがあなたの問題を引き起こしていました。

更新されたFIDDLEを参照してください

于 2013-01-18T06:24:00.223 に答える
0

次のコード行を変更します

ul.main_menu li:hover {

        background: #000000;
        background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #000000), color-stop(100%, #000000));
        background-image: -webkit-linear-gradient(#000000,#000000);
        background-image: -moz-linear-gradient(#000000,#000000);
        background-image: -o-linear-gradient(#000000,#000000);
        background-image: linear-gradient(#000000,#000000);

フィドルhttp://jsfiddle.net/dCE7L/5/を参照してください。 それに応じてフォントの色を変更してください

于 2013-01-18T06:07:21.130 に答える
0

これを試してください：http://jsfiddle.net/dCE7L/6/

表示プロパティを に変更し.main_menu li ul liてdisplay: inline-blockを追加width: 100%した後、.main_menu li ul li:hoverから継承したホバー スタイルの一部をリセットしましたul.main_menu li:hover。

以下の変更:

.main_menu li ul li {
  display: inline-block; /* changed from list-item */
  background:#FFF;
  color:#888;
  padding:5px;
  width: 100%; /* added to make list items take up full width of ul */
}

.main_menu li ul li:hover {
  color:#000;
  cursor:pointer;
  background: none; /* reset */
  box-shadow: none; /* reset */
}
于 2013-01-18T06:16:30.800 に答える