Tree menu

: mod_menu

Live demo


Links are disabled in the demo

Markup

CSS

.tree-menu,
.tree-menu ul {
  margin:0 0 0 1em; 
  padding:0;
  list-style:none;
  color:#369;
  position:relative;
}
.tree-menu ul {
  margin-left:.5em;
} 
.tree-menu:before,
.tree-menu ul:before {
  content:"";
  display:block;
  width:0;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  border-left:1px solid;
}
.tree-menu li {
  margin:0;
  padding:0 1.5em; 
  line-height:2em; 
  font-weight:bold;
  position:relative;
}
.tree-menu li:before {
  content:"";
  display:block;
  width:10px; 
  height:0;
  border-top:1px solid;
  margin-top:-1px; 
  position:absolute;
  top:1em; 
  left:0;
}
.tree-menu li:last-child:before {
  background:white; 
  height:auto;
  top:1em; 
  bottom:0;
}
A PROPOS DE L'AUTEUR :
Webmaster freelance passionné par Joomla depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Daniel est également très impliqué dans la communauté Joomla depuis 2014 en étant membre actif de plusieurs projets, conférencier et fondateur du JUG Breizh.