Dropdown Multi Level With CSS3

Dropdown Multi Level

Menanggapi permintaan teman soal Menu Dropdown Multi Level, Saya akan memberikan sebuah tutorial membuat Dropdown Multi Level With CSS3.

Tutorial ini saya ambil dari red-team-design

Sebelumnya memulai, Lihat dulu DEMO - nya
Baiklah, yang pertama anda harus lakukan adalah ;

Membuat tampilan dengan HTML.

<nav id="menu-wrap">    
 <ul id="menu">
  <li><a href="/">Home</a></li>

  <li>
   <a href="">Categories</a>
   <ul>
    <li>
     <a href="">CSS</a>
     <ul>
      <li><a href="">Item 11</a></li>

      <li><a href="">Item 12</a></li>
      <li><a href="">Item 13</a></li>
      <li><a href="">Item 14</a></li>
     </ul>    
    </li>
    <li>
     <a href="">Graphic design</a>

     <ul>
      <li><a href="">Item 21</a></li>
      <li><a href="">Item 22</a></li>
      <li><a href="">Item 23</a></li>
      <li><a href="">Item 24</a></li>
     </ul>    
    </li>

    <li>
     <a href="">Development tools</a>
     <ul>
      <li><a href="">Item 31</a></li>
      <li><a href="">Item 32</a></li>
      <li><a href="">Item 33</a></li>
      <li><a href="">Item 34</a></li>

     </ul>    
    </li>
    <li>
     <a href="">Web design</a>    
     <ul>
      <li><a href="">Item 41</a></li>
      <li><a href="">Item 42</a></li>
      <li><a href="">Item 43</a></li>

      <li><a href="">Item 44</a></li>
     </ul> 
    </li>
   </ul>
  </li>
  <li>
   <a href="">Work</a>
   <ul>

    <li>
     <a href="">Work 1</a>
     <ul>
      <li>
       <a href="">Work 11</a>  
       <ul>
        <li><a href="">Work 111</a></li>
        <li><a href="">Work 112</a></li>

        <li><a href="">Work 113</a></li>
       </ul>       
      </li>
      <li>
       <a href="">Work 12</a>
       <ul>
        <li><a href="">Work 121</a></li>
        <li><a href="">Work 122</a></li>

        <li><a href="">Work 123</a></li>
       </ul>       
      </li>
      <li>
       <a href="">Work 13</a>
       <ul>
        <li><a href="">Work 131</a></li>
        <li><a href="">Work 132</a></li>

        <li><a href="">Work 133</a></li>
       </ul>       
      </li>
     </ul>     
    </li>
    <li>
     <a href="">Work 2</a>
     <ul>
      <li>

       <a href="">Work 21</a>
       <ul>
        <li><a href="">Work 211</a></li>
        <li><a href="">Work 212</a></li>
        <li><a href="">Work 213</a></li>
       </ul>       
      </li>

      <li>
       <a href="">Work 22</a>
       <ul>
        <li><a href="">Work 221</a></li>
        <li><a href="">Work 222</a></li>
        <li><a href="">Work 223</a></li>
       </ul>       
      </li>

      <li>
       <a href="">Work 23</a>
       <ul>
        <li><a href="">Work 231</a></li>
        <li><a href="">Work 232</a></li>
        <li><a href="">Work 233</a></li>
       </ul>       
      </li>

     </ul>     
    </li>
    <li>
     <a href="">Work 3</a>
     <ul>
      <li>
       <a href="">Work 31</a>
       <ul>

        <li><a href="">Work 311</a></li>
        <li><a href="">Work 312</a></li>
        <li><a href="">Work 313</a></li>
       </ul>       
      </li>
      <li>
       <a href="">Work 32</a>

       <ul>
        <li><a href="">Work 321</a></li>
        <li><a href="">Work 322</a></li>
        <li><a href="">Work 323</a></li>
       </ul>       
      </li>
      <li>
       <a href="">Work 33</a>

       <ul>
        <li><a href="">Work 331</a></li>
        <li><a href="">Work 332</a></li>
        <li><a href="">Work 333</a></li>
       </ul>       
      </li>
     </ul>     
    </li>

   </ul>  
  </li>
  <li><a href="">About</a></li>
  <li><a href="">Contact</a></li>
 </ul>
</nav>

Hasil dari coding diatas

Kemudian, Membuat coding CSS.

#menu, #menu ul { margin: 0; padding: 0; list-style: none; } #menu { width: 960px; margin: 60px auto; border: 1px solid #222; background-color: #111; background-image: -moz-linear-gradient(#444, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); background-image: -webkit-linear-gradient(#444, #111); background-image: -o-linear-gradient(#444, #111); background-image: -ms-linear-gradient(#444, #111); background-image: linear-gradient(#444, #111); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; } #menu:before, #menu:after { content: ""; display: table; } #menu:after { clear: both; } #menu { zoom:1; } #menu li { float: left; border-right: 1px solid #222; -moz-box-shadow: 1px 0 0 #444; -webkit-box-shadow: 1px 0 0 #444; box-shadow: 1px 0 0 #444; position: relative; } #menu a { float: left; padding: 12px 30px; color: #999; text-transform: uppercase; font: bold 12px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; } #menu li:hover > a { color: #fafafa; } *html #menu li a:hover { /* IE6 only */ color: #fafafa; } #menu ul { margin: 20px 0 0 0; _margin: 0; /*IE6 only*/ opacity: 0; visibility: hidden; position: absolute; top: 38px; left: 0; z-index: 1; background: #444; background: -moz-linear-gradient(#444, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-box-shadow: 0 -1px rgba(255,255,255,.3); -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3); box-shadow: 0 -1px 0 rgba(255,255,255,.3); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } #menu li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #menu ul ul { top: 0; left: 150px; margin: 0 0 0 20px; _margin: 0; /*IE6 only*/ -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3); -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3); box-shadow: -1px 0 0 rgba(255,255,255,.3); } #menu ul li { float: none; display: block; border: 0; _line-height: 0; /*IE6 only*/ -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666; -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666; box-shadow: 0 1px 0 #111, 0 2px 0 #666; } #menu ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #menu ul a { padding: 10px; width: 130px; _height: 10px; /*IE6 only*/ display: block; white-space: nowrap; float: none; text-transform: none; } #menu ul a:hover { background-color: #0186ba; background-image: -moz-linear-gradient(#04acec, #0186ba); background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); background-image: -webkit-linear-gradient(#04acec, #0186ba); background-image: -o-linear-gradient(#04acec, #0186ba); background-image: -ms-linear-gradient(#04acec, #0186ba); background-image: linear-gradient(#04acec, #0186ba); } #menu ul li:first-child > a { -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } #menu ul li:first-child > a:after { content: ''; position: absolute; left: 40px; top: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #444; } #menu ul ul li:first-child a:after { left: -6px; top: 50%; margin-top: -6px; border-left: 0; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-right: 6px solid #3b3b3b; } #menu ul li:first-child a:hover:after { border-bottom-color: #04acec; } #menu ul ul li:first-child a:hover:after { border-right-color: #0299d3; border-bottom-color: transparent; } #menu ul li:last-child > a { -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; }