1

请将鼠标悬停在此处菜单中的MORE按钮上：http: //jsfiddle.net/XHard/1/您将看到一个包含单词New clean list的列表。我想为该列表设置样式，但因为它在菜单内，所以它已经有了样式。

我想为它创建一个新的干净风格，但找不到办法。我试过玩，#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/

必须有一种方法可以在该下拉菜单中创建一个新的干净列表。你能弄清楚怎么做吗？如果您会回答，请详细说明我的编码知识有限 - 最好使用更新的小提琴。

4

1 回答 1

2

好的，所以看看<ul>你拥有的标签样式的萤火虫输出。并且 CSS 规则特定<ul>于#mega.

所以我添加了这个针对你想要设置样式的 UL 的 CSS 并重置了一些规则：

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 示例

请注意您为样式设置的原始规则<li>

ul#mega li

这将被我上面应用的目标规则覆盖。

通过更具体的规则，它们会覆盖不太具体的样式（除非样式有 !important 标记）。

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

例如，上述规则将阻止您对规则涵盖的任何元素应用任何进一步的背景颜色更改。!important除非绝对必要，否则使用它并不是一件好事。

于 2012-08-15T20:00:57.940 回答