Skip to main content
cambio en la pregunta
Origen Enlace
asantana o
  • 927
  • 1
  • 10
  • 17

Una solución puede serDandole clases podemos darle como atributo en el html un id a los ul en cuestiónalto según el número de elementos que tenga por debajo, y enasignar a esos el css darle un alto a losdel :before de cada uno de ellos.

/*editado*/
#segundo-.ul:before,
#cuarto-ul2:before{
  height: 160px;
}

#tercer-.ul-1:before {
  height: 47px;
}
/*editado*/

div.panel:first-child {
  margin-top: 20px;
}

div.treeview {
  padding: 4px;
  margin-bottom: 20px;
}

div.treeview ul:first-child:before {
  display: none;
}

.treeview {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #369;
}

.treeview ul {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #369;
  margin-left: 1em;
  position: relative;
}

.treeview ul ul {
  margin-left: 5.5em;
}

.treeview ul:before {
  content: "";
  display: block;
  width: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-left: 1px solid;
  bottom: 4.1rem;
  /* 76px */
}

.treeview li {
  margin: 0;
  padding: 0.4rem 5em;
  line-height: 2em;
  font-weight: 700;
  position: relative;
}

.treeview li .container-fluid .row {
  text-align: center;
  display: block;
}

.treeview li .container-fluid .row .lamb-link {
  display: inline;
}

.treeview li .container-fluid .lamb-name-module {
  color: rgba(0,0,0,0.2);
}

.treeview ul li.lamb-first-li:before {
  border: none;
}

.treeview ul li:before {
  content: "";
  display: block;
  width: 60px;
  height: 0;
  border-top: 1px solid;
  margin-top: 30px;
  position: absolute;
  top: 1em;
  left: 0;
}

.tree-indicator {
  margin-right: 5px;
  cursor: pointer;
}


/** =================*/

.treeview li {
  /** =================*/
}

.treeview li a:hover {
  background: rgba(0,0,0,0.2);
  color: #000;
}

.treeview li a:hover+ul li a {
  background: rgba(0,0,0,0.2);
  color: #000;
}

.treeview li a:hover+ul li::after,
.treeview li a:hover+ul li::before {
  border-color: #94a0b4;
}

.treeview li a:hover+ul::before,
.treeview li a:hover+ul ul::before {
  border-color: #94a0b4;
}

.treeview li a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  height: 100px;
  width: 15rem;
  text-decoration: none;
  background-color: white;
  color: #8b8b8b;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  box-shadow: 0 10px 11px rgba(0,0,0,0.2);
  -transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.treeview li a span {
  top: 50%;
  margin-top: -0.7em;
  display: block;
}

.treeview li button {
  text-decoration: none;
  color: inherit;
  border: none;
  background: transparent;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  outline: 0;
}

.treeview li button:active,
.treeview li button:focus {
  text-decoration: none;
  color: inherit;
  border: none;
  background: transparent;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  outline: 0;
}
<div class="treeview">
  <ul>
    <li class="lamb-first-li">
      <a>
        <div class="container-fluid">
          <div class="row">
            Top level
          </div>
          <div class="row">
            <i class="fa fa-exclamation-circle fa-2x"></i>
          </div>
          <div class="row">
            15 Failed Tests
          </div>
        </div>
      </a>
      <ul id="segundoclass="ul-ul">2">

        <li>
          <a>
            <div class="container-fluid">
              <div class="row">
                Top level
              </div>
              <div class="row">
                <i class="fa fa-exclamation-circle fa-2x"></i>
              </div>
              <div class="row">
                15 Failed Tests
              </div>
            </div>
          </a>
        </li>
        <li>
          <a>
            <div class="container-fluid">
              <div class="row">
                Top level
              </div>
              <div class="row">
                <i class="fa fa-exclamation-circle fa-2x"></i>
              </div>
              <div class="row">
                15 Failed Tests
              </div>
            </div>
          </a>
          <ul id="tercerclass="ul-ul">1">
            <li>
              <a>
                <div class="container-fluid">
                  <div class="row">
                    Top level
                  </div>
                  <div class="row">
                    <i class="fa fa-exclamation-circle fa-2x"></i>
                  </div>
                  <div class="row">
                    15 Failed Tests
                  </div>
                </div>
              </a>
              <ul id="cuartoclass="ul-ul">2">
                <li>
                  <a>
                    <div class="container-fluid">
                      <div class="row">
                        Top level
                      </div>
                      <div class="row">
                        <i class="fa fa-exclamation-circle fa-2x"></i>
                      </div>
                      <div class="row">
                        15 Failed Tests
                      </div>
                    </div>
                  </a>
                </li>
                <li>
                  <a>
                    <div class="container-fluid">
                      <div class="row">
                        Top level
                      </div>
                      <div class="row">
                        <i class="fa fa-exclamation-circle fa-2x"></i>
                      </div>
                      <div class="row">
                        15 Failed Tests
                      </div>
                    </div>
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Una solución puede ser darle como atributo en el html un id a los ul en cuestión, y en el css darle un alto a los :before de cada uno de ellos.

/*editado*/
#segundo-ul:before,
#cuarto-ul:before{
  height: 160px;
}

#tercer-ul:before {
  height: 47px;
}
/*editado*/

div.panel:first-child {
  margin-top: 20px;
}

div.treeview {
  padding: 4px;
  margin-bottom: 20px;
}

div.treeview ul:first-child:before {
  display: none;
}

.treeview {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #369;
}

.treeview ul {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #369;
  margin-left: 1em;
  position: relative;
}

.treeview ul ul {
  margin-left: 5.5em;
}

.treeview ul:before {
  content: "";
  display: block;
  width: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-left: 1px solid;
  bottom: 4.1rem;
  /* 76px */
}

.treeview li {
  margin: 0;
  padding: 0.4rem 5em;
  line-height: 2em;
  font-weight: 700;
  position: relative;
}

.treeview li .container-fluid .row {
  text-align: center;
  display: block;
}

.treeview li .container-fluid .row .lamb-link {
  display: inline;
}

.treeview li .container-fluid .lamb-name-module {
  color: rgba(0,0,0,0.2);
}

.treeview ul li.lamb-first-li:before {
  border: none;
}

.treeview ul li:before {
  content: "";
  display: block;
  width: 60px;
  height: 0;
  border-top: 1px solid;
  margin-top: 30px;
  position: absolute;
  top: 1em;
  left: 0;
}

.tree-indicator {
  margin-right: 5px;
  cursor: pointer;
}


/** =================*/

.treeview li {
  /** =================*/
}

.treeview li a:hover {
  background: rgba(0,0,0,0.2);
  color: #000;
}

.treeview li a:hover+ul li a {
  background: rgba(0,0,0,0.2);
  color: #000;
}

.treeview li a:hover+ul li::after,
.treeview li a:hover+ul li::before {
  border-color: #94a0b4;
}

.treeview li a:hover+ul::before,
.treeview li a:hover+ul ul::before {
  border-color: #94a0b4;
}

.treeview li a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  height: 100px;
  width: 15rem;
  text-decoration: none;
  background-color: white;
  color: #8b8b8b;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  box-shadow: 0 10px 11px rgba(0,0,0,0.2);
  -transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.treeview li a span {
  top: 50%;
  margin-top: -0.7em;
  display: block;
}

.treeview li button {
  text-decoration: none;
  color: inherit;
  border: none;
  background: transparent;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  outline: 0;
}

.treeview li button:active,
.treeview li button:focus {
  text-decoration: none;
  color: inherit;
  border: none;
  background: transparent;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  outline: 0;
}
<div class="treeview">
  <ul>
    <li class="lamb-first-li">
      <a>
        <div class="container-fluid">
          <div class="row">
            Top level
          </div>
          <div class="row">
            <i class="fa fa-exclamation-circle fa-2x"></i>
          </div>
          <div class="row">
            15 Failed Tests
          </div>
        </div>
      </a>
      <ul id="segundo-ul">

        <li>
          <a>
            <div class="container-fluid">
              <div class="row">
                Top level
              </div>
              <div class="row">
                <i class="fa fa-exclamation-circle fa-2x"></i>
              </div>
              <div class="row">
                15 Failed Tests
              </div>
            </div>
          </a>
        </li>
        <li>
          <a>
            <div class="container-fluid">
              <div class="row">
                Top level
              </div>
              <div class="row">
                <i class="fa fa-exclamation-circle fa-2x"></i>
              </div>
              <div class="row">
                15 Failed Tests
              </div>
            </div>
          </a>
          <ul id="tercer-ul">
            <li>
              <a>
                <div class="container-fluid">
                  <div class="row">
                    Top level
                  </div>
                  <div class="row">
                    <i class="fa fa-exclamation-circle fa-2x"></i>
                  </div>
                  <div class="row">
                    15 Failed Tests
                  </div>
                </div>
              </a>
              <ul id="cuarto-ul">
                <li>
                  <a>
                    <div class="container-fluid">
                      <div class="row">
                        Top level
                      </div>
                      <div class="row">
                        <i class="fa fa-exclamation-circle fa-2x"></i>
                      </div>
                      <div class="row">
                        15 Failed Tests
                      </div>
                    </div>
                  </a>
                </li>
                <li>
                  <a>
                    <div class="container-fluid">
                      <div class="row">
                        Top level
                      </div>
                      <div class="row">
                        <i class="fa fa-exclamation-circle fa-2x"></i>
                      </div>
                      <div class="row">
                        15 Failed Tests
                      </div>
                    </div>
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Dandole clases podemos darle un alto según el número de elementos que tenga por debajo, y asignar a esos el alto del :before

/*editado*/
.ul-2:before{
  height: 160px;
}

.ul-1:before {
  height: 47px;
}
/*editado*/

div.panel:first-child {
  margin-top: 20px;
}

div.treeview {
  padding: 4px;
  margin-bottom: 20px;
}

div.treeview ul:first-child:before {
  display: none;
}

.treeview {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #369;
}

.treeview ul {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #369;
  margin-left: 1em;
  position: relative;
}

.treeview ul ul {
  margin-left: 5.5em;
}

.treeview ul:before {
  content: "";
  display: block;
  width: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-left: 1px solid;
  bottom: 4.1rem;
  /* 76px */
}

.treeview li {
  margin: 0;
  padding: 0.4rem 5em;
  line-height: 2em;
  font-weight: 700;
  position: relative;
}

.treeview li .container-fluid .row {
  text-align: center;
  display: block;
}

.treeview li .container-fluid .row .lamb-link {
  display: inline;
}

.treeview li .container-fluid .lamb-name-module {
  color: rgba(0,0,0,0.2);
}

.treeview ul li.lamb-first-li:before {
  border: none;
}

.treeview ul li:before {
  content: "";
  display: block;
  width: 60px;
  height: 0;
  border-top: 1px solid;
  margin-top: 30px;
  position: absolute;
  top: 1em;
  left: 0;
}

.tree-indicator {
  margin-right: 5px;
  cursor: pointer;
}


/** =================*/

.treeview li {
  /** =================*/
}

.treeview li a:hover {
  background: rgba(0,0,0,0.2);
  color: #000;
}

.treeview li a:hover+ul li a {
  background: rgba(0,0,0,0.2);
  color: #000;
}

.treeview li a:hover+ul li::after,
.treeview li a:hover+ul li::before {
  border-color: #94a0b4;
}

.treeview li a:hover+ul::before,
.treeview li a:hover+ul ul::before {
  border-color: #94a0b4;
}

.treeview li a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  height: 100px;
  width: 15rem;
  text-decoration: none;
  background-color: white;
  color: #8b8b8b;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  box-shadow: 0 10px 11px rgba(0,0,0,0.2);
  -transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.treeview li a span {
  top: 50%;
  margin-top: -0.7em;
  display: block;
}

.treeview li button {
  text-decoration: none;
  color: inherit;
  border: none;
  background: transparent;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  outline: 0;
}

.treeview li button:active,
.treeview li button:focus {
  text-decoration: none;
  color: inherit;
  border: none;
  background: transparent;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  outline: 0;
}
<div class="treeview">
  <ul>
    <li class="lamb-first-li">
      <a>
        <div class="container-fluid">
          <div class="row">
            Top level
          </div>
          <div class="row">
            <i class="fa fa-exclamation-circle fa-2x"></i>
          </div>
          <div class="row">
            15 Failed Tests
          </div>
        </div>
      </a>
      <ul class="ul-2">

        <li>
          <a>
            <div class="container-fluid">
              <div class="row">
                Top level
              </div>
              <div class="row">
                <i class="fa fa-exclamation-circle fa-2x"></i>
              </div>
              <div class="row">
                15 Failed Tests
              </div>
            </div>
          </a>
        </li>
        <li>
          <a>
            <div class="container-fluid">
              <div class="row">
                Top level
              </div>
              <div class="row">
                <i class="fa fa-exclamation-circle fa-2x"></i>
              </div>
              <div class="row">
                15 Failed Tests
              </div>
            </div>
          </a>
          <ul class="ul-1">
            <li>
              <a>
                <div class="container-fluid">
                  <div class="row">
                    Top level
                  </div>
                  <div class="row">
                    <i class="fa fa-exclamation-circle fa-2x"></i>
                  </div>
                  <div class="row">
                    15 Failed Tests
                  </div>
                </div>
              </a>
              <ul class="ul-2">
                <li>
                  <a>
                    <div class="container-fluid">
                      <div class="row">
                        Top level
                      </div>
                      <div class="row">
                        <i class="fa fa-exclamation-circle fa-2x"></i>
                      </div>
                      <div class="row">
                        15 Failed Tests
                      </div>
                    </div>
                  </a>
                </li>
                <li>
                  <a>
                    <div class="container-fluid">
                      <div class="row">
                        Top level
                      </div>
                      <div class="row">
                        <i class="fa fa-exclamation-circle fa-2x"></i>
                      </div>
                      <div class="row">
                        15 Failed Tests
                      </div>
                    </div>
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>
mejora de formato
Origen Enlace
asantana o
  • 927
  • 1
  • 10
  • 17

El css está un poco caótico y desordenado. EsasLas líneas las estás haciendo con una misma sentencia con el borde de un :before de los diferentes elementos ul. Para ajustar el alto simplemente podrías darle un valor de height que se ajuste al esquema.

Como digo el código está un poco desordenado, así que laUna solución que creo que mejor te puede servir esser darle como atributo en el html un id a los ul en cuestión, y en el css darle un alto a los :before de cada uno de ellos.

Suponiendo que los identificamos con id="posicion-ul";

#segundo-ul:before {
  height: 160px;
}

#tercer-ul:before {
  height: 47px;
}

#cuarto-ul:before {
  height: 160px;
}
/*editado*/
#segundo-ul:before,
#cuarto-ul:before{
  height: 160px;
}

#tercer-ul:before {
  height: 47px;
}
/*editado*/

div.panel:first-child {
  margin-top: 20px;
}

div.treeview {
  padding: 4px;
  margin-bottom: 20px;
}

div.treeview ul:first-child:before {
  display: none;
}

.treeview {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #369;
}

.treeview ul {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #369;
  margin-left: 1em;
  position: relative;
}

.treeview ul ul {
  margin-left: 5.5em;
}

.treeview ul:before {
  content: "";
  display: block;
  width: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-left: 1px solid;
  bottom: 4.1rem;
  /* 76px */
}

.treeview li {
  margin: 0;
  padding: 0.4rem 5em;
  line-height: 2em;
  font-weight: 700;
  position: relative;
}

.treeview li .container-fluid .row {
  text-align: center;
  display: block;
}

.treeview li .container-fluid .row .lamb-link {
  display: inline;
}

.treeview li .container-fluid .lamb-name-module {
  color: rgba(0,0,0,0.2);
}

.treeview ul li.lamb-first-li:before {
  border: none;
}

.treeview ul li:before {
  content: "";
  display: block;
  width: 60px;
  height: 0;
  border-top: 1px solid;
  margin-top: 30px;
  position: absolute;
  top: 1em;
  left: 0;
}

.tree-indicator {
  margin-right: 5px;
  cursor: pointer;
}


/** =================*/

.treeview li {
  /** =================*/
}

.treeview li a:hover {
  background: rgba(0,0,0,0.2);
  color: #000;
}

.treeview li a:hover+ul li a {
  background: rgba(0,0,0,0.2);
  color: #000;
}

.treeview li a:hover+ul li::after,
.treeview li a:hover+ul li::before {
  border-color: #94a0b4;
}

.treeview li a:hover+ul::before,
.treeview li a:hover+ul ul::before {
  border-color: #94a0b4;
}

.treeview li a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  height: 100px;
  width: 15rem;
  text-decoration: none;
  background-color: white;
  color: #8b8b8b;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  box-shadow: 0 10px 11px rgba(0,0,0,0.2);
  -transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.treeview li a span {
  top: 50%;
  margin-top: -0.7em;
  display: block;
}

.treeview li button {
  text-decoration: none;
  color: inherit;
  border: none;
  background: transparent;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  outline: 0;
}

.treeview li button:active,
.treeview li button:focus {
  text-decoration: none;
  color: inherit;
  border: none;
  background: transparent;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  outline: 0;
}
<div class="treeview">
  <ul>
    <li class="lamb-first-li">
      <a>
        <div class="container-fluid">
          <div class="row">
            Top level
          </div>
          <div class="row">
            <i class="fa fa-exclamation-circle fa-2x"></i>
          </div>
          <div class="row">
            15 Failed Tests
          </div>
        </div>
      </a>
      <ul id="segundo-ul">

        <li>
          <a>
            <div class="container-fluid">
              <div class="row">
                Top level
              </div>
              <div class="row">
                <i class="fa fa-exclamation-circle fa-2x"></i>
              </div>
              <div class="row">
                15 Failed Tests
              </div>
            </div>
          </a>
        </li>
        <li>
          <a>
            <div class="container-fluid">
              <div class="row">
                Top level
              </div>
              <div class="row">
                <i class="fa fa-exclamation-circle fa-2x"></i>
              </div>
              <div class="row">
                15 Failed Tests
              </div>
            </div>
          </a>
          <ul id="tercer-ul">
            <li>
              <a>
                <div class="container-fluid">
                  <div class="row">
                    Top level
                  </div>
                  <div class="row">
                    <i class="fa fa-exclamation-circle fa-2x"></i>
                  </div>
                  <div class="row">
                    15 Failed Tests
                  </div>
                </div>
              </a>
              <ul id="cuarto-ul">
                <li>
                  <a>
                    <div class="container-fluid">
                      <div class="row">
                        Top level
                      </div>
                      <div class="row">
                        <i class="fa fa-exclamation-circle fa-2x"></i>
                      </div>
                      <div class="row">
                        15 Failed Tests
                      </div>
                    </div>
                  </a>
                </li>
                <li>
                  <a>
                    <div class="container-fluid">
                      <div class="row">
                        Top level
                      </div>
                      <div class="row">
                        <i class="fa fa-exclamation-circle fa-2x"></i>
                      </div>
                      <div class="row">
                        15 Failed Tests
                      </div>
                    </div>
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

El primer ul no tiene :before y es a partir del segundo cuando construyes las líneas verticales. Si el código estuviera un poco más ordenado sería más sencillo hacer referencias a cada elemento sin tener que darles un id.

El css está un poco caótico y desordenado. Esas líneas las estás haciendo con una misma sentencia con el borde de un :before de los diferentes elementos ul. Para ajustar el alto simplemente podrías darle un valor de height que se ajuste al esquema.

Como digo el código está un poco desordenado, así que la solución que creo que mejor te puede servir es darle un id a los ul en cuestión, y darle un alto a los :before de cada uno de ellos.

Suponiendo que los identificamos con id="posicion-ul";

#segundo-ul:before {
  height: 160px;
}

#tercer-ul:before {
  height: 47px;
}

#cuarto-ul:before {
  height: 160px;
}

El primer ul no tiene :before y es a partir del segundo cuando construyes las líneas verticales. Si el código estuviera un poco más ordenado sería más sencillo hacer referencias a cada elemento sin tener que darles un id.

Las líneas las estás haciendo con una misma sentencia con el borde de un :before de los diferentes elementos ul. Para ajustar el alto simplemente podrías darle un valor de height que se ajuste al esquema.

Una solución puede ser darle como atributo en el html un id a los ul en cuestión, y en el css darle un alto a los :before de cada uno de ellos.

/*editado*/
#segundo-ul:before,
#cuarto-ul:before{
  height: 160px;
}

#tercer-ul:before {
  height: 47px;
}
/*editado*/

div.panel:first-child {
  margin-top: 20px;
}

div.treeview {
  padding: 4px;
  margin-bottom: 20px;
}

div.treeview ul:first-child:before {
  display: none;
}

.treeview {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #369;
}

.treeview ul {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #369;
  margin-left: 1em;
  position: relative;
}

.treeview ul ul {
  margin-left: 5.5em;
}

.treeview ul:before {
  content: "";
  display: block;
  width: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-left: 1px solid;
  bottom: 4.1rem;
  /* 76px */
}

.treeview li {
  margin: 0;
  padding: 0.4rem 5em;
  line-height: 2em;
  font-weight: 700;
  position: relative;
}

.treeview li .container-fluid .row {
  text-align: center;
  display: block;
}

.treeview li .container-fluid .row .lamb-link {
  display: inline;
}

.treeview li .container-fluid .lamb-name-module {
  color: rgba(0,0,0,0.2);
}

.treeview ul li.lamb-first-li:before {
  border: none;
}

.treeview ul li:before {
  content: "";
  display: block;
  width: 60px;
  height: 0;
  border-top: 1px solid;
  margin-top: 30px;
  position: absolute;
  top: 1em;
  left: 0;
}

.tree-indicator {
  margin-right: 5px;
  cursor: pointer;
}


/** =================*/

.treeview li {
  /** =================*/
}

.treeview li a:hover {
  background: rgba(0,0,0,0.2);
  color: #000;
}

.treeview li a:hover+ul li a {
  background: rgba(0,0,0,0.2);
  color: #000;
}

.treeview li a:hover+ul li::after,
.treeview li a:hover+ul li::before {
  border-color: #94a0b4;
}

.treeview li a:hover+ul::before,
.treeview li a:hover+ul ul::before {
  border-color: #94a0b4;
}

.treeview li a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  height: 100px;
  width: 15rem;
  text-decoration: none;
  background-color: white;
  color: #8b8b8b;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  box-shadow: 0 10px 11px rgba(0,0,0,0.2);
  -transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.treeview li a span {
  top: 50%;
  margin-top: -0.7em;
  display: block;
}

.treeview li button {
  text-decoration: none;
  color: inherit;
  border: none;
  background: transparent;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  outline: 0;
}

.treeview li button:active,
.treeview li button:focus {
  text-decoration: none;
  color: inherit;
  border: none;
  background: transparent;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  outline: 0;
}
<div class="treeview">
  <ul>
    <li class="lamb-first-li">
      <a>
        <div class="container-fluid">
          <div class="row">
            Top level
          </div>
          <div class="row">
            <i class="fa fa-exclamation-circle fa-2x"></i>
          </div>
          <div class="row">
            15 Failed Tests
          </div>
        </div>
      </a>
      <ul id="segundo-ul">

        <li>
          <a>
            <div class="container-fluid">
              <div class="row">
                Top level
              </div>
              <div class="row">
                <i class="fa fa-exclamation-circle fa-2x"></i>
              </div>
              <div class="row">
                15 Failed Tests
              </div>
            </div>
          </a>
        </li>
        <li>
          <a>
            <div class="container-fluid">
              <div class="row">
                Top level
              </div>
              <div class="row">
                <i class="fa fa-exclamation-circle fa-2x"></i>
              </div>
              <div class="row">
                15 Failed Tests
              </div>
            </div>
          </a>
          <ul id="tercer-ul">
            <li>
              <a>
                <div class="container-fluid">
                  <div class="row">
                    Top level
                  </div>
                  <div class="row">
                    <i class="fa fa-exclamation-circle fa-2x"></i>
                  </div>
                  <div class="row">
                    15 Failed Tests
                  </div>
                </div>
              </a>
              <ul id="cuarto-ul">
                <li>
                  <a>
                    <div class="container-fluid">
                      <div class="row">
                        Top level
                      </div>
                      <div class="row">
                        <i class="fa fa-exclamation-circle fa-2x"></i>
                      </div>
                      <div class="row">
                        15 Failed Tests
                      </div>
                    </div>
                  </a>
                </li>
                <li>
                  <a>
                    <div class="container-fluid">
                      <div class="row">
                        Top level
                      </div>
                      <div class="row">
                        <i class="fa fa-exclamation-circle fa-2x"></i>
                      </div>
                      <div class="row">
                        15 Failed Tests
                      </div>
                    </div>
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>
Publicación recuperada por asantana o
Publicación eliminada por asantana o
Origen Enlace
asantana o
  • 927
  • 1
  • 10
  • 17

El css está un poco caótico y desordenado. Esas líneas las estás haciendo con una misma sentencia con el borde de un :before de los diferentes elementos ul. Para ajustar el alto simplemente podrías darle un valor de height que se ajuste al esquema.

Como digo el código está un poco desordenado, así que la solución que creo que mejor te puede servir es darle un id a los ul en cuestión, y darle un alto a los :before de cada uno de ellos.

Suponiendo que los identificamos con id="posicion-ul";

#segundo-ul:before {
  height: 160px;
}

#tercer-ul:before {
  height: 47px;
}

#cuarto-ul:before {
  height: 160px;
}

El primer ul no tiene :before y es a partir del segundo cuando construyes las líneas verticales. Si el código estuviera un poco más ordenado sería más sencillo hacer referencias a cada elemento sin tener que darles un id.