Cara membuat vertikal menu part 1

---

• Landscapes

  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Quisque tincidunt Donec tempor Sed placerat leo vel Curabitur ac bibendum Duis nec diam Sed quis massa

• Portraits

  Vestibulum scelerisque quam a dui interdum semper.
  Quisque tincidunt Donec tempor Curabitur aliquet Curabitur Class aptent Vestibulum

• Flowers

  Mauris pellentesque, ligula eget molestie suscipit.
  Nunc accumsan Sed varius Vestibulum Phasellus quis Maecenas Nullam ligula

• Abstracts

  Cum sociis natoque penatibus et magnis dis parturient montes.
  Duis nec diam Ut sagittis Sed a lorem Mauris id mi Donec sit amet Aliquam placerat

• Seascapes

  Aenean quis lacus id eros lobortis dapibus sed non nisi.
  Donec fringilla Quisque vel Duis at magna Maecenas rutrum Ut iaculis tristique Suspendisse

seperti ini contoh menunya:caranya yaitu masukkan kode css dibawah ini:

     h2.slideInfoa {normal font:18px/25px georgia, serif; color:#000;}
    h2.slideInfoa span {padding:0 80px;}

    .slideHolder {height:498px; width:190px; margin:0 0px; padding:2px;
    font-family:georgia, serif; border:1px solid #888; float:left;}

    .slideOuter {height:498px; width:190px; overflow:hidden; margin:0;}
    .slideOuter .slide {padding:0; margin:0; list-style:none;
    height:800px; width:190px; overflow:hidden;}
    .slideOuter .slide li {display:block; float:left; height:98px;
    border-bottom:2px solid #fff; width:190px; overflow:hidden;
    background:red;
    -webkit-transition: 0.75s;
    -moz-transition: 0.75s;
    -o-transition: 0.75s;
    transition: 0.75s;
    }
    .slideOuter .slide li.p5 {height:318px;}
    .slideOuter .slide.current li {height:43px;}
    .slideOuter .slide.current li.current {height:318px;}
    .slideOuter .slide.current li.p5 {height:318px;}

    .slideOuter .slide li.p1
    {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6_AHD-_vasIWuPQGBTAX-d4KP9viNfKk2KJ4yX1_uGILKnUMaLyi6gpa0NuRPrsGki-2x8_M9F14s3WXIu84JvaP2C3SKJXK5FkTOjQ5gP9dVVnVaqd04zSNlH037MsLOsDLoFd6O6o0/s400/pic1.jpg);}
    .slideOuter .slide li.p2
    {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjspu_atiEypUASt9A3PyvjTKUVZNb2qPHA7Es7wWkUb6270o0ORhrB_OqjY966UtGBYjs5NiMToNsTfhaLEtblhJw2dqgJlvDqdy7Yp02AoIy40pJgYULXFy5AV0c0aG4KYRl5SJX5A-M/s400/pic2.jpg);}
    .slideOuter .slide li.p3
    {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz9w2-4IzGCev_tlxOVkd0dLjOJbAhyTDgGI7oZ-eT4uzENrLyl_ppZyAx3H9ZJLUnv1nfb5cTnTLCRbRbH5YDAgYrAoLaFIB0DPym2MRSdW3rwrK9zkgbluJFOGwl-_H7ObSl7IVsbWM/s400/pic3.jpg);}
    .slideOuter .slide li.p4
    {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNb-FSFPICLaH5wQ6HQrrp0y8ayH1Z_s_2-3B1fkSt5d6GMmnTYFSrr5ucNqM2WvRw3OwMh8k1KwQq1STWixzzMHHp50xpfPJovuqFHoSNfICyGv-kXFxiCMoyFvwiEAaf0FvPiiFuJ7M/s400/pic4.jpg);}
    .slideOuter .slide li.p5
    {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsl7_Xlcog4HNCwOjKNiiDsPzfQEXpZ_s8xWIGi3CjbbUgKq7qnxjEe3D2Dvw-Knc_vSUvkFzEEZc4uSyy570qvMHbfujyJsrx5Zqx9P0B8-3Jvh4bFkdO_3ZFLlofiN7x4LAkNjEocdY/s400/pic5.jpg);}

    .slideOuter .slide:hover li.p1,
    .slideOuter .slide:hover li.p2,
    .slideOuter .slide:hover li.p3,
    .slideOuter .slide:hover li.p4 {height:43px;}

    .slideOuter .slide:hover li.p1:hover,
    .slideOuter .slide:hover li.p2:hover,
    .slideOuter .slide:hover li.p3:hover,
    .slideOuter .slide:hover li.p4:hover {height:318px;}

    .slideOuter .slide li h1 {padding:0 5px; margin:0; font-size:24px;
    line-height:43px; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);}
    .slideOuter .slide li {color:#fff;}
    .slideOuter .slide li.p2 h1 {color:#c60;}
    .slideOuter .slide li.p3 h1 {color:#040;}
    .slideOuter .slide li.p4 h1 {color:#400;}
    .slideOuter .slide li.p5 h1 {color:#000;}

    .slideOuter .slide li p {font-weight:bold; padding:0 5px 20px 15px;
    margin:0; font-size:12px; line-height:17px; text-shadow: 0px 2px 4px
    rgba(0, 0, 0, 0.6);}
    .slideOuter .slide li a {display:block; color:#fff; padding:0 15px;
    margin:0; font-size:14px; line-height:25px; width:190px;
    font-weight:bold; text-decoration:none;}
    .slideOuter .slide li a:hover {text-decoration:underline;}
    .clear {clear:left;}

lalu tambahkan gadget/widget HTML, trus masukkan kode dibawah ini 

<div id="infoa">
    <div class="slideHolder">
    <div class="slideOuter">
    <ul class="slide current">
    <li class="p1">
     <div>
     <h1>Landscapes</h1>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
     <a href="#url">Quisque tincidunt</a>
     <a href="#url">Donec tempor</a>

     <a href="#url">Sed placerat leo vel</a>
     <a href="#url">Curabitur ac bibendum</a>
     <a href="#url">Duis nec diam</a>
     <a href="#url">Sed quis massa</a>
     </div>
    </li>
    <li class="p2 current">
     <div>

     <h1>Portraits</h1>
     <p>Vestibulum scelerisque quam a dui interdum semper.</p>
     <a href="#url">Quisque tincidunt</a>
     <a href="#url">Donec tempor</a>
     <a href="#url">Curabitur aliquet</a>
     <a href="#url">Curabitur</a>

     <a href="#url">Class aptent</a>
     <a href="#url">Vestibulum</a>
     </div>
    </li>
    <li class="p3">
     <div>
     <h1>Flowers</h1>
     <p>Mauris pellentesque, ligula eget molestie suscipit.</p>

     <a href="#url">Nunc accumsan</a>
     <a href="#url">Sed varius</a>
     <a href="#url">Vestibulum</a>
     <a href="#url">Phasellus quis</a>
     <a href="#url">Maecenas</a>
     <a href="#url">Nullam ligula</a>

     </div>
    </li>
    <li class="p4">
     <div>
     <h1>Abstracts</h1>
     <p>Cum sociis natoque penatibus et magnis dis parturient montes.</p>
     <a href="#url">Duis nec diam</a>
     <a href="#url">Ut sagittis</a>

     <a href="#url">Sed a lorem</a>
     <a href="#url">Mauris id mi</a>
     <a href="#url">Donec sit amet</a>
     <a href="#url">Aliquam placerat</a>
     </div>
    </li>
    <li class="p5">
     <div>

     <h1>Seascapes</h1>
     <p>Aenean quis lacus id eros lobortis dapibus sed non nisi.</p>
     <a href="#url">Donec fringilla</a>
     <a href="#url">Quisque vel</a>
     <a href="#url">Duis at magna</a>
     <a href="#url">Maecenas rutrum</a>

     <a href="#url">Ut iaculis tristique</a>
     <a href="#url">Suspendisse</a>
     </div>
    </li>
    </ul>
    </div>
    </div>

    </div> <!-- end of infoa -->

Lanjut ke Cara membuat vertikal menu part 2