Cómo diseñar una lista dentro de un menú?

Pase el mouse sobre el botón MÁS en el menú aquí: http://jsfiddle.net/XHard/1/ Verá que hay una lista que contiene las palabras Nueva lista limpia . Quiero darle un estilo a esa lista, pero como está dentro del menú, ya tiene un estilo.

Quiero crear un nuevo estilo limpio para él, pero no puedo encontrar la forma de hacerlo. Intenté jugar con #mega moreleftbar a pero el estilo de la lista de menú original todavía está allí.

¿Hay alguna manera de hacer un nuevo estilo limpio para una lista dentro de ese menú?

Aquí hay una parte de mi HTML:

   

Aquí está parte de mi 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 
  • and
    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 pa { 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; }
  • Aunque, recomendaría pasar por alto el violín para una presentación visual del problema: http://jsfiddle.net/XHard/1/

    Debe haber una manera de hacer una nueva lista limpia en ese menú desplegable. ¿Puedes averiguar cómo? Si responde, tenga en cuenta que mi conocimiento de encoding es limitado, idealmente con un violín actualizado.

    Ok, solo eché un vistazo a la salida Firebugs en el estilo de la etiqueta

      que tienes. Y las reglas de CSS son específicas para las tags

        dentro de #mega .

        Así que agregué este CSS que apunta a la UL que desea diseñar y restablecer algunas reglas:

         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; } 

        Ejemplo JSfiddle

        Observe su regla original para diseñar el

      •  ul#mega li 

        Esto será sobrescrito por las reglas objective que he aplicado anteriormente.

        Al ser más específicos con las reglas, sobrescriben estilos menos específicos (a menos que un estilo tenga una etiqueta importante).

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

        La regla anterior, por ejemplo, le impedirá aplicar más cambios de color de fondo a los elementos que están cubiertos por la regla. !important no es algo bueno de usar a menos que sea absolutamente necesario.