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

更改以下代码行

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 回答
0

我在主菜单上删除了您的悬停属性之一。你有一个display:inline-block，ul.main_menu li:hover这导致了你的问题。

查看更新的 FIDDLE

于 2013-01-18T06:24:00.223 回答