Question

If you could kindly hover your mouse over the MORE button in the menu here: http://jsfiddle.net/H8FVE/7/
You will see that there is a list containing the words Random text here. I tried to style that list but somehow the styling of the drop down menu prevents me from doing it. The style I used for the list is:

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

Here is part of the 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 -->

Although, I would advice overlooking the fiddle for a visual presentation of the issue: http://jsfiddle.net/H8FVE/7/

Can you figure out how to fix the styling? If you choose to answer, please be detailed as my coding knowledge is limited – ideally with an updated fiddle.

Answer 1

I just updated it. http://jsfiddle.net/H8FVE/11/

I added a class called .random in the css code and class=”random” into the ul element you aimed to modify.
in the css I added the following code, although you may change it to fill your purposes. (if you want to style only the ul, change it to .random { }

.random li {
    font-weight:bold;
}