0

メニューの [MORE] ボタンの上にマウスを置いていただければ、http://jsfiddle.net/H8FVE/7/ Random text here という単語を含むリストが表示されます。そのリストのスタイルを設定しようとしましたが、どういうわけかドロップダウン メニューのスタイルが原因でできません。リストに使用したスタイルは次のとおりです。

#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/

スタイルを修正する方法を理解できますか？回答する場合は、私のコーディング知識が限られているため、詳しく教えてください。理想的には、更新されたフィドルを使用してください。

4

1 に答える 1

1

更新しました。http://jsfiddle.net/H8FVE/11/

css コードに .random というクラスを追加し、変更対象の ul 要素に class="random" を追加しました。css に次のコードを追加しましたが、目的に合わせて変更することもできます。(ul のみをスタイルする場合は、.random { } に変更します。

.random li {
    font-weight:bold;
}
于 2012-08-15T23:31:13.050 に答える