html - 我的某些样式不起作用

Question

为什么我的某些样式不起作用。

我已经试过了，但是我的菜单有问题。

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>

Answer 1

试试这个: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 */
}