15.7　设置嵌套列表的样式

可以在一个列表中插入另一个列表，里面的列表就称为嵌套列表。对于有序列表和无序列表均可创建嵌套列表（混合在一起或单独嵌套）。此外，还有另外一种嵌套列表，有关示例参见15.8节。

如果要按有序列表的结构创建大纲（可能需要好几级的列表项目，如图15.7.1、图15.7.2和图15.7.3所示），或者需要按无序列表的结构创建带子菜单的导航（如图15.7.4和图15.7.5所示，更多细节参见“使用嵌套列表创建下拉式导航”），就会发现嵌套列表很有用。可以通过很多方式为嵌套列表设置样式，就像示例所展示的那样。

  1. ...
  2. <body>
  3.  
  4. <h1>The Great American Novel</h1>
  5. <ol>
  6.      <li>Introduction
  7.         <ol>
  8.            <li>Boy's childhood</li>
  9.            <li>Girl's childhood</li>
  10.         </ol>
  11.      </li>
  12.      <li>Development
  13.         <ol>
  14.            <li>Boy meets Girl</li>
  15.            <li>Boy and Girl fall in love </li>
  16.            <li>Boy and Girl have fight </li>
  17.         </ol>
  18.      </li>
  19.      <li>Climax
  20.         <ol>
  21.            <li>Boy gives Girl ultimatum
  22.               <ol>
  23.                  <li>Girl can't believe her ears</li>
  24.                  <li>Boy is indignant at Girl's indignance</li>
  25.                  </ol>
  26.            </li>
  27.            <li>Girl tells Boy to get lost</li>
  28.         </ol>
  29.      </li>
  30.      <li>Denouement</li>
  31.      <li>Epilogue</li>
  32. </ol>
  33.  
  34. </body>
  35. </html>

图15.7.1　这里有四个嵌套列表，一个位于Introduction列表项目内，一个位于Development列表项目内，一个位于Climax列表项目内，还有一个突出显示的粗体字列表位于Boy gives Girl ultimatum列表项目内（该列表项目又位于Climax列表项目内）

  1. ol li {
  2.     font-size: .75em;
  3.     list-style-type: upper-roman;
  4. }
  5.  
  6. ol ol li {
  7.     list-style-type: upper-alpha;
  8. }
  9.  
  10. ol ol ol li {
  11.     list-style-type: decimal;
  12. }
  13.  
  14. li li {
  15.     font-size: 1em;
  16. }

图15.7.2　可以对每一级嵌套列表单独进行格式化。如果要对列表中的文本使用em或百分数设置字体大小，就需要添加li li {font-size: 1em; }（或者将1em替换为100%），以防止嵌套列表不断缩小而导致难以辨认（参见最后一条提示）

15.7　设置嵌套列表的样式 - 图1

图15.7.3　第一级列表（ol li）使用大写罗马数字，第二级列表（ol ol li）使用大写字母，第三级列表（ol ol ol li）使用阿拉伯数字

  1. ...
  2. <body>
  3. <nav role="navigation">
  4.      <ul class="nav">
  5.         <li><a href="http://www.ituring.com.cn/">Home</a></li>
  6.         <li><a href="http://www.ituring.com.cn/products/">Products</a>
  7.            <ul>
  8.               <li><a href="http://www.ituring.com.cn/products/phones.html">Phones</a></li>
  9.               <li><a href="http://www.ituring.com.cn/products/accessories.html">Accessories</a></li>
  10.            </ul>
  11.         </li>
  12.         <li><a href="http://www.ituring.com.cn/support/">Support</a>
  13.            <ul>
  14.               <li><a href="http://www.thephoneycompany.com/support/forum/">Community Forum </a></li>
  15.               <li><a href="http://www.ituring.com.cn/support/contact-us.html">Contact Us</a></li>
  16.               <li><a href="http://www.ituring.com.cn/support/how-to-guides.html">How-to Guides</a></li>
  17.            </ul>
  18.         </li>
  19.         <li><a href="http://www.ituring.com.cn/about-us/">About Us</a></li>
  20.      </ul>
  21. </nav>
  22. ...
  23. </body>
  24. </html>

图15.7.4　这是另一个嵌套列表的例子。在这个例子中，使用无序列表构建导航菜单，同时使用两个嵌套的无序列表构建子菜单。注意，每个嵌套的ul都包含在其父元素开始标记

  • 和结束标记之内。通过一些CSS，可以让导航水平排列，同时让子菜单在默认情况下隐藏起来，并在访问者激活它们时显示出来，如图15.7.5所示

    15.7　设置嵌套列表的样式 - 图2

    图15.7.5　Products和Support列表项目都包含嵌套在ul中的子菜单，不过，由于应用了一些CSS，这两个子菜单在默认情况下并不显示出来。在这个例子中，Support的子菜单显示出来了，这是因为鼠标停留在包含Support链接及子菜单嵌套列表的li上的缘故。完整的CSS见本书配套网站

    为嵌套列表设置样式的步骤

    • 要设置最外层列表的样式，输入toplevel li {_style_rules_}，其中，toplevel是最外层列表的类型（如ol、ul或dt），_style_rules_是要应用的样式。

    • 对于第二级列表，输入toplevel 2ndlevel li {_style_rules_}，其中，toplevel对应于第1步中的toplevel，2ndlevel则是第二级列表的类型。

    • 对于第三级列表，输入toplevel 2ndlevel 3rdlevel li {_style_rules_}，其中，toplevel和2ndlevel对应于第1步和第2步中的toplevel和2ndlevel，3rdlevel则是第三级列表的类型。

    • 对于要设置样式的每个嵌套列表，继续以上述方法进行设置。

    提示　选择器应反映文档中嵌套列表的类型，例如，可能需要使用ul ul ol li这样的选择器。

    　

    提示　除了上述方法以外，也可以为每个嵌套列表添加类名，再设置对应的样式。不过，这里演示的方法可以在不改变HTML的情况下控制样式。

    　

    提示　无论嵌套的层级是哪一级，有序列表在默认情况下总是使用阿拉伯数字（1、2、3……）。可以使用list-style-type指定其他的编号方案。根据The Chicago Manual of Style一书的建议，正确的列表嵌套次序为I、A、1、a（此后交替使用1和a编号方案）。

    　

    提示　默认情况下，对于无序列表，第一级列表使用圆点符号，下一级列表使用空心圆点符号，第三级及后续各级列表使用方块符号。类似地，可以使用list-style-type指定希望使用的符号类型（参见15.2节）。

    　

    提示　由于列表项目（li元素）可以嵌套在其他列表项目内，因此在使用相对值指定字体大小时需要留心。如果使用像li {font-size: .75em; }这样的样式规则，那么最外层列表项目的字体大小便是其父元素的75%，因此如果该父元素的字体大小为默认的16像素，那么最外层列表项目就是12像素大小，这还算好。但是，第一个嵌套列表项目的字体大小会是其父元素（第一个列表项目，12像素大小）的75%，因此只有9像素。每一级都会迅速让情况变得更糟糕。一种解决方案是添加li li {font-size: 1em; }，如图15.7.2所示（或者将1em替换为100%）。这样，嵌套列表项目就总是与顶级列表项目一样大，如图15.7.3所示。（由Eric Meyer提供，www.meyerweb.com。）

    　

    使用嵌套列表创建下拉式导航

    嵌套列表的一种使用场合是创建下拉式（或飞出式）导航菜单（如图15.7.4所示）。通过使用CSS为导航添加一些样式，可以让每个子菜单仅在访问者鼠标停留在其父元素的列表项目上时显示出来（如图15.7.5所示），并在访问者将鼠标移走时隐藏。

    可以通过多种方法实现这一效果，但这些方法总离不开在选择器中使用:hover伪类以显示子菜单。下面演示了这样一种在默认情况下隐藏嵌套列表，并在访问者鼠标停留时显示该列表的方法：

    1. / 子菜单的默认状态 /
    2.  
    3. .nav li ul {
    4.  
    5.  left: -9999em; / 将子菜单移出屏幕 /
    6.  
    7.    position: absolute;
    8.  
    9.    z-index: 1000;
    10.  
    11. }
    12.  
    13. / 当鼠标停留在父元素li上时子菜单的状态 /
    14.  
    15. .nav li:hover ul {
    16.  
    17.    display: block; / 针对IE的旧版本 /
    18.  
    19.    left: auto; / 让子菜单回到自然状态 /
    20.  
    21. }

    对应的HTML如图15.7.4所示。要实现水平排布，移除列表项目的符号，以及对外观进行调整，都需要使用更多的CSS。图15.7.5中所示页面的完整HTML和CSS代码见本书配套网站（www.bruceontheloose.com/htmlcss/examples/chapter-15/dropdown-nav.html）。我还在代码中添加了一些注释。

    可以使用类似的方法创建带飞出式子菜单的垂直导航（子菜单显示在导航的侧边）。