tree_menu

by mikehudak

HTML

<ul class="tree">
	<li>Animals
		<ul>
			<li>Birds</li>
			<li>Mammals
				<ul>
					<li>Elephant</li>
					<li>Mouse</li>
				</ul>
			</li>
			<li>Reptiles</li>
		</ul>
	</li>
	<li>Plants
		<ul>
			<li>Flowers
				<ul>
					<li>Rose</li>
					<li>Tulip</li>
				</ul>
			</li>
			<li>Trees</li>
		</ul>
	</li>
</ul>

CSS

body {
  padding:50px;
  background-color:white;
}

ul.tree,
ul.tree ul {
  list-style:none;
  margin:0;
  padding:0;
}

ul.tree ul {
  margin-left:10px;
  background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAKAQMAAABPHKYJAAAAA1BMVEWIiIhYZW6zAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH1ggGExMZBky19AAAAAtJREFUCNdjYMAEAAAUAAHlhrBKAAAAAElFTkSuQmCC') repeat-y 0 100%;
}

ul.tree li {
  margin:0;
  padding:0 12px;
  font-size:14px;
  line-height:20px;
  color:#369;
  font-weight:bold;
}

ul.tree ul li {
  background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAUAQMAAACK1e4oAAAABlBMVEUAAwCIiIgd2JB2AAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YIBhQIJYVaFGwAAAARSURBVAjXY2hgQIf/GTDFGgDSkwqATqpCHAAAAABJRU5ErkJggg==') no-repeat 0 0;
}

ul.tree ul li.last,
ul.tree ul li:last-child {
  background:white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAUAQMAAACK1e4oAAAABlBMVEUAAwCIiIgd2JB2AAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YIBhQIIhs+gc8AAAAQSURBVAjXY2hgQIf/GbAAAKCTBYBUjWvCAAAAAElFTkSuQmCC') no-repeat 0 100%;
}