如何在菜單中設置列表的樣式？

Question

請將鼠標懸停在此菜單中更多按鈕：http://jsfiddle.net/XHard/1/你會看到，有包含單詞新的清潔列表列表。我想要設置該列表的樣式，但因爲它位於菜單內部，所以它已經具有樣式。

我想爲它創建一個新的乾淨風格，但無法找到一種方法來實現它。我試着玩#mega moreleftbar a，但原始菜單列表樣式仍然存在。

有沒有一種方法可以爲該菜單中的列表創建一個新的乾淨樣式？

這裏是我的HTML的一部分：

<div id="second-menu" class="clearfix"> 
    <ul id="secondary-menu" class="nav sf-js-enabled"> 
     <li class="manimation"><a href="" style="width:400px;border-bottom:9px solid #43cf61">Animation</a></li> 
    </ul> 

    <ul id="mega"> 
     <li class="dif mmore" style="background:none;"><a href="#" style="font-style:italic;border-bottom:9px solid #4b5571">More...</a> 
      <div> 
       <moretopbar> 
        <ul> 
         <li class="mgames"><a href="" style="border-bottom:9px solid #e34328">Games</a></li> 
         <li class="mliterature"><a href="" style="border-bottom:9px solid #2c8f83">Literature</a></li> 
         <li class="marts"><a href="" style="border-bottom:9px solid #cc226a">Arts</a></li> 
         <li class="mcontact" style="background:none;"><a href="" style="border-bottom:9px solid #9395aa">Contact</a></li> 
        </ul> 
       </moretopbar> 

       <morecontainer> 
        <moreleftbar> 

         <ul> 
          <li><a href="">New clean list 1</a></li> 
          <li><a href="">New clean list 2</a></li> 
          <li><a href="">New clean list 3</a></li> 
          <li><a href="">New clean list 4</a></li> 
         </ul> 

        </moreleftbar> 
       </morecontainer> 


      </div> 
     </li> 
    </ul> 
</div> <!-- end #second-menu --> 

這裏是我的CSS的一部分：

ul#top-menu li { padding-right: 2px; background: url(images/menu-bg.png) repeat-y top right; } 
    ul#top-menu a { font-size: 11px; color: #ffffff; text-decoration: none; text-transform: uppercase; font-weight: bold; text-shadow: 1px 1px 1px rgba(0,0,0,0.7); padding: 16px 12px 10px; } 
    ul#top-menu a:hover { color: #ebbe5e;} 
    ul#top-menu > li.current_page_item > a { color: #ebbe5e !important; } 

    ul#top-menu li ul, #mobile_menu { width: 170px !important; padding: 0; background: #161616 url(images/header-bg.png); top: 45px !important; -moz-box-shadow:3px 3px 7px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.1); box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.1); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border-top-left-radius: 0px;-moz-border-radius-topleft: 0px; border-top-right-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; z-index: 9999px; display: none; } 
     ul#top-menu ul li, #mobile_menu li a { margin: 0 !important; padding: 10px 7px 10px 25px !important; background: url(images/top-menu-separator.png) repeat-x; } 
     ul#top-menu ul li.first-item { background: none; } 
      ul#top-menu ul li a, #mobile_menu a { padding: 0 !important; width: 138px; } 

      ul#top-menu li:hover ul ul, ul#top-menu li.sfHover ul ul { top: -1px !important; left: 171px !important; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } 

    ul#top-menu li.menu-gradient { background: url("images/top-shadow.png") repeat-x; position: absolute; top: 0; left: 0; width: 202px; height: 7px !important; } 

ul#secondary-menu li { background: url(images/secondary-menu-bg.png) repeat-y top right; } 
    ul#secondary-menu a { font-size: 16px; color: #48423f; text-decoration: none; text-transform: uppercase; font-weight: bold; padding: 22px 16px; } 
    ul#secondary-menu a:hover { color: #ffffff; text-shadow: 1px 1px 0 #404747; } 
    #second-menu ul.nav li:hover a {color: #ffffff; text-shadow: 1px 1px 0 #404747; } 

    ul#secondary-menu > li.current_page_item > a { color: #919e9e !important; }  

    ul#secondary-menu li ul, #category_mobile_menu { width: 360px !important; padding: 7px 0 10px; background: #fff url(images/content-bg.png); top: 55px !important; -moz-box-shadow:3px 3px 7px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.1); box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.1); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border-top-left-radius: 0px;-moz-border-radius-topleft: 0px; border-top-right-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; z-index: 9999px; display: none; } 
     ul#secondary-menu ul li, #category_mobile_menu li a { margin: 0 !important; padding: 8px 0 8px 30px !important; width: 150px; float: left; } 
      ul#secondary-menu ul li a, #category_mobile_menu a { padding: 0 !important; } 

      ul#secondary-menu li:hover ul ul, ul#secondary-menu li.sfHover ul ul { top: -8px !important; left: 180px !important; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } 
      ul#secondary-menu ul li.even-item { background: none; } 


.manimation:hover{ 
    background:#43cf61 !important; 
} 
.mmore:hover{ 
    background:#4b5571 !important; 
} 
.mliterature:hover{ 
    background:#2c8f83 !important; 
} 
.mgames:hover{ 
    background:#e34328 !important; 
} 
.marts:hover{ 
    background:#cc226a !important; 
} 
.mcontact:hover{ 
    background:#9395aa !important; 
} 

/* ---------- Mega Drop Down --------- */ 
ul#mega li { padding-right: 0px; background: url(images/secondary-menu-bg.png) repeat-y top right; } 

#mega { 
list-style:none; 
font-weight:bold; 
height:2em; 

} 
#mega li { 
padding: 23px 0px; 
background:#999; 
border:0px solid #000; 
float:left; 
text-align:center; 
position:relative; 
} 
#mega li:hover { 
background:#eee; 
border-bottom:0; /* border-bottom:0; and padding-bottom:1px; keeps <li> and <div> connected */ 
z-index:1; /* shadow above adjacent li */ 

} 
#mega a { font-size: 16px; color: #48423f; text-decoration: none; text-transform: uppercase; font-weight: bold; padding: 22px 16px;} 

ul#mega a:hover { color: #FFFFFF; text-shadow: 1px 1px 0 #404747; } 



/* ----------- Hide/Show Div ---------- */ 
#mega div { 
    -moz-border-bottom-colors: none; 
    -moz-border-image: none; 
    -moz-border-left-colors: none; 
    -moz-border-right-colors: none; 
    -moz-border-top-colors: none; 
    background: none repeat scroll 0 0 #FFFFFF; 
    border-color: -moz-use-text-color #48423F #48423F; 
    border-right: 1px solid #48423F; 
    border-style: none solid solid; 
    border-width: 0 1px 1px; 
    font-weight: normal; 
    left: -999em; 
    margin-top: 1px; 
    position: absolute; 
    text-align: left; 
    width: 496px; 
} 
/* --------- Within Div Styles --------- */ 
#mega li:hover div { 
    left: -1px; 
    top: auto; 
} 
#mega li.dif:hover div { 
    left: -407px; 
    top: 72px; 
} 
#mega li.mmore:hover > a { 
    color: #FFFFFF; text-shadow: 1px 1px 0 #404747; /* Ensures hover on MORE remains */ 
} 
#mega div h2 { 
    background: none repeat scroll 0 0 #999999; 
    clear: both; 
    float: left; 
    font-size: 1em; 
    margin: 10px 0 5px; 
    padding: 0 10px; 
    position: relative; 
    width: 300px; 
} 
#mega div moretopbar { 
    clear: both; 
    float: left; 
    position: relative; 
margin-left:1px; 
margin-right:1px; 
    width: 495px; 
    height: 74px; 
    background-image: url(images/morebgwide.png); 
    background-size:495px 74px; 
    background-repeat:no-repeat; 
} 
#mega div p { 
    float: left; 
    padding-left: 10px; 
    position: relative; 
    width: 106px; 
} 
#mega div p a { 
    clear: left; 
    float: left; 
    line-height: 1.4; 
    text-decoration: underline; 
    width: 100%; 
} 
#mega div a:hover, #mega div a:focus, #mega div a:active { 
    text-decoration: none; 
} 
#mega div morecontainer { 
    width: 495px; 
} 
#mega div moreleftbar { 
    width: 70%; 
} 

#mega moreleftbar a { /* I want to style the list here - clean slate*/ 
    margin-left: 0; 
    padding-left: 0; 
    list-style-type: none; 
    font-family: Arial, Helvetica, sans-serif; 
    color: #cc6600; 
} 

雖然，我會建議俯瞰搗鼓這個問題的視覺呈現：http://jsfiddle.net/XHard/1/

必須有辦法在該下拉菜單中創建一個新的清單。你能弄清楚如何？如果你會回答，請詳細說明我的編碼知識是有限的 - 理想情況下更新小提琴。

Answer 1

好的，所以只需看看你擁有的<ul>標籤的造型上的螢火蟲輸出。而CSS規則特定於#mega中的<ul>標籤。

所以我加入這個CSS爲目標的UL想要的風格並且重新設定一些規則：爲造型的<li>

ul#mega li 

ul#mega moreleftbar ul, 
ul#mega moreleftbar ul li, 
ul#mega moreleftbar ul li a, 
ul#mega moreleftbar ul li a:hover 
{ 
    padding:0; 
    border:0; 
    margin:0; 
    color:#000000; 
    font-size:inherit; 
    font-weight:normal; 
    background:none; 
} 

JSfiddle example

通知您原來的規則這將被我上面應用的目標規則覆蓋。

通過更具體的規則，他們覆蓋較少的特定樣式（除非樣式具有！重要的標籤）。

.manimation:hover{ 
    background:#43cf61 !important; 
} 

例如上述規則將阻止你能夠進一步的背景顏色更改應用到由規則所涵蓋的任何元素。除非絕對必要，否則使用!important不是一件好事。