如果您可以将鼠标悬停在此处菜单中的“更多”按钮上: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/
你能弄清楚如何修复造型吗?如果您选择回答,请详细说明我的编码知识是有限的 - 最好是有更新的小提琴。
答案 0 :(得分:1)
我刚刚更新了它。 http://jsfiddle.net/H8FVE/11/
我在css代码中添加了一个名为.random的类,并在你想要修改的ul元素中添加了class =“random”。 在CSS中我添加了以下代码,尽管您可以更改它以填充您的目的。 (如果您只想设置ul的样式,请将其更改为.random {}
.random li {
font-weight:bold;
}