title: Unable to draw lines between html elements
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1" %&gt;
    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
    &lt;html&gt;
  
    &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
      &lt;title&gt;Available Streams&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="CSS/styleSheet.css" /&gt;
  
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div id="set_cstext-title" class="handcursor" style="display:block; padding:0px; margin-bottom:1px; background-color:#274B7D; color:#FFFFFF; font-weight: bold; font: italic normal bold normal 30px helvetica, arial, sans-serif;"&gt;
        &lt;img src="logo-cisco.png"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; QA Test Automation&lt;/div&gt;
  
      &lt;p align="right"&gt;
        &lt;a class="hyperlinkblock4" href="ChangeConfig.jsp"&gt;Change Config&lt;/a&gt; |
        &lt;a class="hyperlinkblock2" href="LoginPage.jsp"&gt;Logout&lt;/a&gt;
      &lt;/p&gt;
      &lt;div class="tabbable"&gt;
  
        &lt;ul class="tabs"&gt;
          &lt;li&gt;&lt;a href="#CFADashBoards"&gt;CFA DashBoard Links&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#EnvironmentValidations"&gt;Data Validations&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#CubeValidations"&gt;Cube Validations&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#CompatibilityValidations"&gt;Compatibility Validations&lt;/a&gt;
          &lt;/li&gt;
  
  
  
        &lt;/ul&gt;
  
        &lt;div class="tabcontent"&gt;
  
          &lt;!---------------------------------------------------- CFA DashBoards -----------------------------------------------------------------------------------&gt;
          &lt;div id="CFADashBoards" class="tab"&gt;
            &lt;br&gt;
  
            &lt;!--
  We will create a family tree using just CSS(3)
  The markup will be simple nested lists
  --&gt;
            &lt;div class="tree" id="tree"&gt;
              &lt;ul&gt;
                &lt;li&gt;
                  &lt;a href="#"&gt;Parent&lt;/a&gt;
                  &lt;ul&gt;
                    &lt;li&gt;
                      &lt;a href="#"&gt;Child&lt;/a&gt;
                      &lt;ul&gt;
                        &lt;li&gt;
                          &lt;a href="#"&gt;Grand Child&lt;/a&gt;
                        &lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                      &lt;a href="#"&gt;Child&lt;/a&gt;
                      &lt;ul&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Grand Child&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                          &lt;a href="#"&gt;Grand Child&lt;/a&gt;
                          &lt;ul&gt;
                            &lt;li&gt;
                              &lt;a href="#"&gt;Great Grand Child&lt;/a&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                              &lt;a href="#"&gt;Great Grand Child&lt;/a&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                              &lt;a href="#"&gt;Great Grand Child&lt;/a&gt;
                            &lt;/li&gt;
                          &lt;/ul&gt;
                        &lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Grand Child&lt;/a&gt;
                        &lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
  
            &lt;br&gt;
            &lt;br&gt;
  
  
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="http://code.jquery.com/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="finbiJavaScript.js"&gt;&lt;/script&gt;
  
  
    &lt;/body&gt;
  
    &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I wanted to show a parent child tree flow for my href links in my JSP page, after googling a while I got to know it can be done via CSS.
  I was referring to this site: <a href="http://thecodeplayer.com/walkthrough/css3-family-tree" rel="nofollow noreferrer">http://thecodeplayer.com/walkthrough/css3-family-tree</a></p>
  
  <p>However even after copying the same code it seems to not work in my page.</p>
  
  <p><a href="https://i.stack.imgur.com/HjvZd.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HjvZd.jpg" alt="enter image description here"></a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="tree" id="tree"&gt;
  &lt;ul&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;Parent&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Child&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;Grand Child&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Child&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Grand Child&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;Grand Child&lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li&gt;
                                  &lt;a href="#"&gt;Great Grand Child&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href="#"&gt;Great Grand Child&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href="#"&gt;Great Grand Child&lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Grand Child&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>* {margin: 0; padding: 0;}
  .tree ul {
  padding-top: 20px; position: relative;
  -transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  }
  
  .tree li {
  float: left; text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;
  -transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  }
  
  /*We will use ::before and ::after to draw the connectors*/
  
  .tree li::before, .tree li::after{
  content: '';
  position: absolute; top: 0; right: 50%;
  border-top: 1px solid #ccc;
  width: 50%; height: 20px;
  }
  .tree li::after{
  right: auto; left: 50%;
  border-left: 1px solid #ccc;
  }
  
  /*We need to remove left-right connectors from elements without 
  any siblings*/
  .tree li:only-child::after, .tree li:only-child::before {
  display: none;
  }
  
  /*Remove space from the top of single children*/
  .tree li:only-child{ padding-top: 0;}
  
  /*Remove left connector from first child and 
  right connector from last child*/
  .tree li:first-child::before, .tree li:last-child::after{
  border: 0 none;
  }
  /*Adding back the vertical connector to the last nodes*/
  .tree li:last-child::before{
  border-right: 1px solid #ccc;
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  }
  .tree li:first-child::after{
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  }
  
  /*Time to add downward connectors from parents*/
  .tree ul ul::before{
  content: '';
  position: absolute; top: 0; left: 50%;
  border-left: 1px solid #ccc;
  width: 0; height: 20px;
  }
  
  .tree li a{
  border: 1px solid #ccc;
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  
  -transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  }
  
  /*Time for some hover effects*/
  /*We will apply the hover effect the the lineage of the element also*/
  .tree li a:hover, .tree li a:hover+ul li a {
  background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
  }
  /*Connector styles on hover*/
  .tree li a:hover+ul li::after, 
  .tree li a:hover+ul li::before, 
  .tree li a:hover+ul::before, 
  .tree li a:hover+ul ul::before{
  border-color:  #94a0b4;
  }
  </code></pre>