일부 스타일이 작동하지 않습니다.

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/ 나는 display: inline-block에 .main_menu li ul li에 디스플레이 속성을 변경 한 후 .main_menu li ul li:hover에 내가 ul.main_menu li:hover에서 상속 호버 스타일의 일부를 재설정 width: 100%을 추가했다.

변화는 아래 :

.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 2

코드의 당신의 다음 줄을 변경

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/ 글꼴 색상 변경 accordin 의 Gly

Answer 3

나는 메인 메뉴에 당신의 호버 속성 중 하나를 제거했다. ul.main_menu li:hover에 display:inline-block이 있는데 문제가있었습니다.

는 마우스에 검은 색을 통해 원하는