纯css实现一个树形菜单效果代码-html代码-BFW代码库

纯css实现一个树形菜单效果代码

代码语言：html

代码描述：纯css实现一个树形菜单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
body {
  background:white;
  font:normal normal 13px/1.4 Segoe,"Segoe UI",Calibri,Helmet,FreeSans,Sans-Serif;
  padding:50px;
}


/**
 * Framework starts from here ...
 * ------------------------------
 */

.tree,
.tree ul {
  margin:0 0 0 1em; /* indentation */
  padding:0;
  list-style:none;
  color:#369;
  position:relative;
}

.tree ul {margin-left:.5em} /* (indentation/2) */

.tree:before,
.tree ul:before {
  content:"";
  display:block;
  width:0;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  border-left:1px solid;
}

.tree li {
  margin:0;
  padding:0 1.5em; /* indentation + .5em */
  line-height:2em; /* default list item's `line-height` */
  font-weight:bold;
  position:relative;
}

.tree li:before {
  content:"";
  display:block;
  width:10px; /* same with indentation */
  height:0;
  border-top:1px solid;
  margin-top:-1px; /* border top width */
  position:absolute;
  top:1em; /* (line-height/2) */
  left:0;
}

.tree li:last-child:before {
  background:white; /* same with body background */
  height:auto;
  top:1em; /* (line-height/2) */
  bottom:0;
}
</style>


</head>

<body translate="no" >
  <div>
  <p>Caption Here</p>
  <ul class="tree">
    <li>Animals
      <ul>
        <li>Birds</li>
        <li>Mammals
          <ul>
            <li>Elephant</li>
            <li>Mouse</li>
          </.........完整代码请登录后点击上方下载按钮下载查看