清除巨型下拉菜单中新样式列表的列表样式

时间:2012-08-15 16:42:09

标签: html css list drop-down-menu

如果您可以将鼠标悬停在此处菜单中的“更多”按钮上:http://jsfiddle.net/H8FVE/7/ 您将看到有一个包含此处随机文本字样的列表。我尝试设置该列表的样式,但不知何故,下拉菜单的样式阻止我这样做。我用于列表的样式是:

#trendcontainer  {
    margin-top: 0px;
    padding-bottom: 1px;
}

#trend { width: 188px; }

#trend ul
{
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
}

#trend film
{
    display: block;
    padding: 3px;
    width: 188px;
    background-color: #B40404;
    border-bottom: 1px solid #eee;
        text-align: center;
    letter-spacing: 0.4px;
    color: #FAFAFA;
}

以下是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>

                <trendcontainer>
                    <trend>
                        <ul>
                            <li><film>Random text here</film></li>
                            <li><film>Random text here</film></li>
                            <li><film>Random text here</film></li>
                            <li><film>Random text here</film></li>
                        </ul>
                    </trend>
                </trendcontainer>

</moreleftbar>

</morecontainer>

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

虽然,我建议忽视这个问题的视觉呈现:http://jsfiddle.net/H8FVE/7/

你能弄清楚如何修复造型吗?如果您选择回答,请详细说明我的编码知识是有限的 - 最好是有更新的小提琴。

1 个答案:

答案 0 :(得分:1)

我刚刚更新了它。 http://jsfiddle.net/H8FVE/11/

我在css代码中添加了一个名为.random的类,并在你想要修改的ul元素中添加了class =“random”。 在CSS中我添加了以下代码,尽管您可以更改它以填充您的目的。 (如果您只想设置ul的样式,请将其更改为.random {}

.random li {
    font-weight:bold;
}