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

更改以下代码行

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/ 相应地更改字体颜色

Answer 2

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

Answer 3

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

查看更新的FIDDLE

我的一些风格不起作用

3 个答案: