Sitemap Diagram CSS3

Memasang Sitemap Diagram
kode sitemap ini bisa digunakan untuk
halaman statis
langkah penerapannya sebagai berikut
Klik entri halaman baru HTML copy kode berikut letakan kedalam halaman baru tersebut, klik pratinjau untuk melihat hasil jika sudah sesuai klik publis selesai

<style>
/*Now the CSS*/
* {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;
}
</style>
<div class="tree">
 <ul>
  <li>
   <a href="Your Link">MYSCRIPT2010s</a>
   <ul>
    <li>
     <a href="Your Link">HOME</a>
     <ul>
      <li>
       <a href="Your Link">SUB MENU</a>
      </li>
     </ul>
    </li>
    <li>
     <a href="Your Link">CATEGORIES</a>
     <ul>
      <li><a href="Your Link">ALL TITLE</a></li>
      <li>
       <a href="Your Link">CONTACT</a>
       <ul>
        <li>
         <a href="Your Link">DISPLAY MENU</a>
        </li>
        <li>
         <a href="Your Link">BLOG ARCHIVE</a>
        </li>
        <li>
         <a href="Your Link">SOCIAL</a>
        </li>
       </ul>
      </li>
      <li><a href="Your Link">COPYRIGHT</a></li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</div>

Penjelasan :
Terapkan Link dan Teks yang berwarna orange Sesuai Fungsinya

Sumber by. Kode Play
Edited   by. Myscript2010

DEMO SHOW