font-weight: bold に問題があり、そのリスト項目内のネストされたリンクに継承されます。
「選択された」クラスを持つli要素内のリンクのみを太字にしたい。
http://jsfiddle.net/lasseedsvik/aDQfL/
HTML:
<ul class="submenu">
<li class="submenu-root-node selected">
<a href="/first">first</a>
<ul class="submenu-submenu-container">
<li class="submenu-sub-item">
<a href="/second">second</a>
</li>
</ul>
</li>
<li class="submenu-root-node">
<a href="/third">third</a>
</li>
</ul>
CSS:
.submenu a
{
color: #000;
font-size: 16px;
text-decoration: none;
}
.submenu li.selected a
{
font-weight: bold;
}
.submenu-sub-item a {
font-weight: normal;
}
順序付けられていないリストはサーバー側で生成されるため、css でこれを行うだけでよいことを好みます。