指导 3 - 嵌套列表

步骤 14 - 将主列表项内容的字体改为粗体

在完成之前，您可以将您的主列表项设置为粗体而嵌套列表项设置为普通。请注意您必须特别指定嵌套列表为普通，否则主列表项的粗体设置会被嵌套列表继承同样显示为粗体。

完成！

步骤综合 →

CSS 代码
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer li { margin: 0; }

#navcontainer a
{
display: block;
color: #FFF;
background-color: #036;
width: 9em;
padding: 3px 12px 3px 8px;
text-decoration: none;
border-bottom: 1px solid #fff;
font-weight: bold;
}

#navcontainer a:hover
{
background-color: #369;
color: #FFF;
}

#navcontainer li li a
{
display: block;
color: #FFF;
background-color: #69C;
width: 9em;
padding: 3px 3px 3px 17px;
text-decoration: none;
border-bottom: 1px solid #fff;
font-weight: normal;
}


HTML 代码
<div id="navcontainer">
<ul>
<li><a href="#">Milk</a>
   <ul>
   <li><a href="#">Goat</a></li>
   <li><a href="#">Cow</a></li>
   </ul>
</li>
<li><a href="#">Eggs</a>
   <ul>
   <li><a href="#">Free-range</a></li>
   <li><a href="#">Other</a></li>
   </ul>
</li>
<li><a href="#">Cheese</a>
   <ul>
   <li><a href="#">Smelly</a></li>
   <li><a href="#">Extra smelly</a></li>
   </ul>
</li>
</ul>
</div>
其他的Max Design 文章和演讲
相关链接 webstandardsgroup.org