纯 CSS 打造标准的导航菜单－3

本节我们要实现：鼠标移到子菜单上时，显示子菜单的子菜单。

原理跟第二节的一样，只是改变一下 left、top 来实现不同的定位。

<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>千一网络 - 网页技术 永无止境</title>
<style type="text/css">
body
{
    line-height:150%;
    font-size:13px;
}

ul
{
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    border:1px solid #009999;
    background-color:#FFFFFF;
    list-style-type:none;
}

a:link
{
    font-size:13px;
    text-decoration:none;
}

a:hover
{
    font-size:13px;
    text-decoration:none;
}

a:visited
{
    font-size:13px;
    text-decoration:none;
}
/*========================================*/
/*========================================*/
.nav .navItem
{
    display:inline;
}
/*========================================*/
/*========================================*/
.navItem:hover
{
    position:relative;
}
.navItem .subNav
{
    position:absolute;
    left:-9999px;
    top:-9999px;
    width:100px;
}
.navItem:hover .subNav
{
    position:absolute;
    left:0px;
    top:13px;
    width:100px;
}
/*========================================*/
/*========================================*/
.subNavItem:hover
{
    position:relative;
}
.subNavItem .grandsonNav
{
    position:absolute;
    left:-9999px;
    top:-9999px;
    width:100px;
}
.subNavItem:hover .grandsonNav
{
    position:absolute;
    left:100px;
    top:0px;
    width:100px;
}
</style>
</head>

<body>

<ul class="nav">
  <li class="navItem"><a href="/">网站首页</a></li>
  <li class="navItem"><a href="/products/">千一产品</a></li>
  <li class="navItem"><a href="/docs/">技术文档</a>
    <ul class="subNav">
      <li class="subNavItem"><a href="/docs/asp/">ASP</a>
        <ul class="grandsonNav">
          <li class="grandsonNavItem"><a href="/docs/asp/learning/">ASP学习</a></li>
          <li class="grandsonNavItem"><a href="/docs/asp/application/">ASP应用</a></li>
          <li class="grandsonNavItem"><a href="/docs/asp/skill/">ASP技巧</a></li>
          <li class="grandsonNavItem"><a href="/docs/asp/material/">ASP资料</a></li>
        </ul>
      </li>
      <li class="subNavItem"><a href="/docs/asp.net/">ASP.NET</a></li>
      <li class="subNavItem"><a href="/docs/javascript/">JavaScript</a></li>
      <li class="subNavItem"><a href="/docs/xhtmlcss/">XHTML+CSS</a>
        <ul class="grandsonNav">
          <li class="grandsonNavItem"><a href="/docs/xhtmlcss/xhtml/">XHTML</a></li>
          <li class="grandsonNavItem"><a href="/docs/xhtmlcss/xml/">XML</a></li>
          <li class="grandsonNavItem"><a href="/docs/xhtmlcss/css/">CSS</a></li>
          <li class="grandsonNavItem"><a href="/docs/xhtmlcss/standards/">标准与兼容性</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<p>网页内容</p>

</body>

</html>

[Ctrl+A 全部选择提示：您可先修改部分代码，再按运行]

一个完整的 CSS 菜单就完成了，我们实际中要做的只是美化一下，让它好看一些。以上代码已经通过 W3C 的 XHTML、CSS 代码校验，兼容各浏览器（IE6 除外、IE7 可以）。

ASP.NET 中的 AJAX	ASP.NET 画图全接触	ASP.NET 与 XML	声明式数据绑定	ASP.NET 网页抓取
C# 基础	C# 类教程	C# 加密	ASP.NET 成员资格	非“自动化”处理 Excel