实现简单二级导航，纯CSS样式实现二级导航

作者：Jasmine - 2015年03月17日

<!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-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
body { margin:0 auto; font-size:12px; font-family: "宋体", Arial, Helvetica, sans-serif; line-height:normal; }
ul, dl, dd, h1, h2, h3, h4, h5, h6, form, p { padding:0; margin:0; }
ul { list-style:none; }
* { margin:0px; padding:0px; }
a { text-decoration:none; }
img { border:0px; }
a:hover { color:#ff8000; text-decoration: none; }
.clearFloat { clear:both; }
.treeview { width:600px; padding:0 0 0 1px; height:31px; margin:0px auto; float:left; }
.treeview ul { margin-top:1px; }
.treeview ul li { float:left; position:relative; z-index:1001; background:#52b6d6; }
.treeview ul li ul { position:absolute; left:0; z-index:1001; }
.treeview ul li ul li { float:none; display:block; }
.treeview ul li a { width:85px; height:31px; line-height:31px; color:#000; font-size:14px; display:block; text-align:center; background:none; }
.treeview ul li a:hover { color:#333; background:#cbebfa; text-decoration:none; margin:0px; padding:0px; width:85px; }
.treeview ul ul { visibility:hidden; position:absolute; }
.treeview ul li:hover ul, .treeview ul li a:hover ul { margin:0px; padding:0px; visibility:visible; }
-->
</style>
</head>

<body>
<div class="treeview">
  <ul>
    <li><a href="">公司介绍</a></li>
    <li><a href="">公司架构</a>
      <ul>
        <li><a href="">公司介绍</a></li>
        <li><a href="">公司架构</a></li>
        <li><a href="">资质历史</a></li>
        <li><a href="">回顾专利</a></li>
      </ul>
    </li>
    <li><a href="">资质历史</a></li>
    <li><a href="">回顾专利</a></li>
  </ul>
</div>
</body>
</html>

效果请复制代码到dw测试。

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/148

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！