Kumpulan Dropdown Menu tanpa JavaScript

Biasanya dropdown menu dibuat menggunakan JavaScript/jQuery. Padahal tanpa itupun dropdown menu (baik vertikal maupun horizonal) dapat diciptakan. Berikut ini saya salinkan untuk pembaca jelasinblog.blogspot.com beberapa contoh dropdown menu tanpa JavaScript.

Neoteric Dark Red

DEMO

HTML 

<!-- Start css3menu.com BODY section -->
<ul id="css3menu1" class="topmenu">
    <li class="topmenu"><a href="#" style="height:32px;line-height:32px;"><img src="http://css3menu.com/images/neoteric-dark-red/home1.png" alt=""/>Home</a>
    </li>
    <li class="topmenu"><a href="#" style="height:32px;line-height:32px;"><span><img src="http://css3menu.com/images/neoteric-dark-red/info.png" alt=""/>Product info</span></a>

        <ul>
            <li><a href="#"><img src="http://css3menu.com/images/neoteric-dark-red/pencil.png" alt=""/>Features</a>
            </li>
            <li><a href="#"><span><img src="http://css3menu.com/images/neoteric-dark-red/hammer.png" alt=""/>Installation</span></a>

                <ul>
                    <li><a href="#"><img src="http://css3menu.com/images/neoteric-dark-red/push_pin.png" alt=""/>Description of files</a>
                    </li>
                    <li><a href="#"><img src="http://css3menu.com/images/neoteric-dark-red/gear.png" alt=""/>How to setup</a>
                    </li>
                </ul>
            </li>
            <li><a href="#"><img src="http://css3menu.com/images/neoteric-dark-red/documents.png" alt=""/>Parameters info</a>
            </li>
            <li><a href="#"><span><img src="http://css3menu.com/images/neoteric-dark-red/world.png" alt=""/>Supported browsers</span></a>

                <ul>
                    <li><a href="#">Firefox</a>
                    </li>
                    <li><a href="#">Internet Explorer</a>
                    </li>
                    <li><a href="#">Opera</a>
                    </li>
                    <li><a href="#">Safari</a>
                    </li>
                    <li><a href="#">Google Chrome</a>
                    </li>
                </ul>
            </li>
            <li><a href="#"><img src="http://css3menu.com/images/neoteric-dark-red/help1.png" alt=""/>CSS3 info</a>
            </li>
        </ul>
    </li>
    <li class="topmenu"><a href="#" style="height:32px;line-height:32px;"><span><img src="http://css3menu.com/images/neoteric-dark-red/heart.png" alt=""/>Samples</span></a>

        <ul>
            <li><a href="#"><img src="http://css3menu.com/images/neoteric-dark-red/add.png" alt=""/>Android template</a>
            </li>
            <li><a href="#"><img src="http://css3menu.com/images/neoteric-dark-red/add1.png" alt=""/>Mac template</a>
            </li>
            <li><a href="#"><span><img src="http://css3menu.com/images/neoteric-dark-red/add2.png" alt=""/>Mercury template</span></a>

                <ul>
                    <li><a href="#">Blue theme</a>
                    </li>
                    <li><a href="#">Green theme</a>
                    </li>
                    <li><a href="#">Lilac theme</a>
                    </li>
                    <li><a href="#">Orange theme</a>
                    </li>
                </ul>
            </li>
            <li><a href="#"><img src="http://css3menu.com/images/neoteric-dark-red/add3.png" alt=""/>Elegant template</a>
            </li>
            <li><a href="#"><span><img src="http://css3menu.com/images/neoteric-dark-red/add4.png" alt=""/>Point template</span></a>

                <ul>
                    <li><a href="#">Aquamarine theme</a>
                    </li>
                    <li><a href="#">Blue theme</a>
                    </li>
                    <li><a href="#">Green theme</a>
                    </li>
                    <li><a href="#">Grey theme</a>
                    </li>
                    <li><a href="#">Orange theme</a>
                    </li>
                    <li><a href="#">Red theme</a>
                    </li>
                </ul>
            </li>
            <li><a href="#"><img src="http://css3menu.com/images/neoteric-dark-red/add5.png" alt=""/>Toolbars template</a>
            </li>
        </ul>
    </li>
</ul>
<p class="_css3m"><a href="http://css3menu.com/neoteric-dark-red.html" target="_blank">Original Code </a> </p><p class="_css3m"> <a href="http://jelasinblog.blogspot.com/2014/05/kumpulan-dropdown-menu-tanpa-javascript.html">Back to Tutorial </a>
</p>
<!-- End css3menu.com BODY section -->

CSS

ul#css3menu1, ul#css3menu1 ul {
    margin:0;
    list-style:none;
    padding:0;
    background-color:#201816;
    border-width:0;
    border-style:solid;
    border-color:;
}
ul#css3menu1 ul {
    visibility:hidden;
    position:absolute;
    left:0;
    top:100%;
    opacity:0;
    -moz-transition:all 0.5s;
    -webkit-transition:opacity 0.5s;
    -o-transition:opacity 0.5s, visibility 0.5s;
    transition:opacity 0.5s;
    background-color:#CB4E48;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    -moz-box-shadow:0 -8px 16px -4px #ba3b35 inset;
    -webkit-box-shadow:0 -8px 16px -4px #ba3b35 inset;
    box-shadow:0 -8px 16px -4px #ba3b35 inset;
    padding:0 7px 7px;
}
ul#css3menu1 li:hover>ul {
    visibility:visible;
    opacity:1;
}
ul#css3menu1 li {
    position:relative;
    display:block;
    white-space:nowrap;
    font-size:0;
    float:left;
}
ul#css3menu1 li:hover {
    z-index:1;
}
ul#css3menu1 ul ul {
    position:absolute;
    left:100%;
    top:0;
    -moz-box-shadow:0 -8px 16px -4px #ba3b35 inset;
    -webkit-box-shadow:0 -8px 16px -4px #ba3b35 inset;
    box-shadow:0 -8px 16px -4px #ba3b35 inset;
}
ul#css3menu1 {
    font-size:0;
    z-index:999;
    position:relative;
    display:inline-block;
    zoom:1;
    padding:0;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    *display:inline;
}
* html ul#css3menu1 li a {
    display:inline-block;
}
ul#css3menu1>li {
    margin:0;
}
ul#css3menu1 a:active, ul#css3menu1 a:focus {
    outline-style:none;
}
ul#css3menu1 a {
    display:block;
    vertical-align:middle;
    text-align:left;
    text-decoration:none;
    font:16px Dosis, Arial, sans-serif;
    color:#000000;
    cursor:pointer;
    padding:17px 20px;
    background-color:;
    background-repeat:repeat;
    border-width:0px;
    border-style:none;
    border-color:;
}
ul#css3menu1 ul li {
    float:none;
    margin:7px 0 0;
}
ul#css3menu1 ul a {
    text-align:left;
    padding:5px 15px;
    background-color:transparent;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    color:#EDC1BF;
    text-decoration:none;
    text-shadow:0 1px 1px #BE3C36;
}
ul#css3menu1 li:hover>a, ul#css3menu1 li a.pressed {
    border-style:none;
    color:#FFFFFF;
    text-decoration:none;
}
ul#css3menu1 img {
    border:none;
    vertical-align:middle;
    margin-right:17px;
}
ul#css3menu1 ul span {
    background-image:none;
    padding-right:5px;
}
ul#css3menu1 ul li:hover>a, ul#css3menu1 ul li a.pressed {
    background-color:#BC433D;
    color:#ffffff;
    text-decoration:none;
    text-shadow:0 1px 1px #BE3C36;
}
ul#css3menu1 li.topmenu>a {
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
    background-color:#201816;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    -moz-transition:all 0.5s;
    -webkit-transition:all 0.5s;
    -o-transition:all 0.5s;
    color:#988989;
}
ul#css3menu1 li.topmenu:hover>a, ul#css3menu1 li.topmenu a.pressed {
    -moz-box-shadow:inset 0 8px 12px -2px #ba3b35;
    -webkit-box-shadow:inset 0 8px 12px -2px #ba3b35;
    box-shadow:inset 0 8px 12px -2px #ba3b35;
    background-color:#CB4E48;
    color:#FFFFFF;
}

Reflex Black Vertical

DEMO

HTML

<!-- Start Reflex Black Vertical dropdown -->
<ul id="css3menu1" class="topmenu">
    <li class="topfirst"><a href="#" title="Home" style="width:146px;"><img src="http://css3menu.com/images/reflex-black-vertical/computer on.png" alt=""/>Home</a>
    </li>
    <li class="topmenu"><a href="#" title="Product info" style="width:146px;"><span><img src="http://css3menu.com/images/reflex-black-vertical/splash green.png" alt=""/>Product info</span></a>

        <ul>
            <li class="subfirst"><a href="#" title="Features"><img src="http://css3menu.com/images/reflex-black-vertical/applications.png" alt=""/>Features</a>
            </li>
            <li><a href="#" title="Installation"><span><img src="http://css3menu.com/images/reflex-black-vertical/advanced.png" alt=""/>Installation</span></a>

                <ul>
                    <li class="subfirst"><a href="#" title="Description of files"><img src="http://css3menu.com/images/reflex-black-vertical/notebook.png" alt=""/>Description of files</a>
                    </li>
                    <li class="sublast"><a href="#" title="How to setup"><img src="http://css3menu.com/images/reflex-black-vertical/library bookmarked.png" alt=""/>How to setup</a>
                    </li>
                </ul>
            </li>
            <li><a href="#" title="Parameters info"><img src="http://css3menu.com/images/reflex-black-vertical/info3.png" alt=""/>Parameters info</a>
            </li>
            <li><a href="#" title="Supported browsers"><span><img src="http://css3menu.com/images/reflex-black-vertical/color.png" alt=""/>Supported browsers</span></a>

                <ul>
                    <li class="subfirst"><a href="#" title="Firefox">Firefox</a>
                    </li>
                    <li><a href="#" title="Internet Explorer">Internet Explorer</a>
                    </li>
                    <li><a href="#" title="Opera">Opera</a>
                    </li>
                    <li><a href="#" title="Safari">Safari</a>
                    </li>
                    <li class="sublast"><a href="#" title="Google Chrome">Google Chrome</a>
                    </li>
                </ul>
            </li>
            <li class="sublast"><a href="#" title="CSS3 info"><img src="http://css3menu.com/images/reflex-black-vertical/edit2.png" alt=""/>CSS3 info</a>
            </li>
        </ul>
    </li>
    <li class="topmenu"><a href="#" title="Samples" style="width:146px;"><span><img src="http://css3menu.com/images/reflex-black-vertical/star1.png" alt=""/>Samples</span></a>

        <ul>
            <li class="subfirst"><a href="#" title="Android template"><img src="http://css3menu.com/images/reflex-black-vertical/universal1.png" alt=""/>Android template</a>
            </li>
            <li><a href="#" title="Mac template"><img src="http://css3menu.com/images/reflex-black-vertical/universal2.png" alt=""/>Mac template</a>
            </li>
            <li><a href="#" title="Mercury template"><span><img src="http://css3menu.com/images/reflex-black-vertical/universal3.png" alt=""/>Mercury template</span></a>

                <ul>
                    <li class="subfirst"><a href="#" title="Blue theme">Blue theme</a>
                    </li>
                    <li><a href="#" title="Green theme">Green theme</a>
                    </li>
                    <li><a href="#" title="Lilac theme">Lilac theme</a>
                    </li>
                    <li class="sublast"><a href="#" title="Orange theme">Orange theme</a>
                    </li>
                </ul>
            </li>
            <li><a href="#" title="Elegant template"><img src="http://css3menu.com/images/reflex-black-vertical/universal4.png" alt=""/>Elegant template</a>
            </li>
            <li><a href="#" title="Point template"><span><img src="http://css3menu.com/images/reflex-black-vertical/universal5.png" alt=""/>Point template</span></a>

                <ul>
                    <li class="subfirst"><a href="#" title="Aquamarine theme">Aquamarine theme</a>
                    </li>
                    <li><a href="#" title="Blue theme">Blue theme</a>
                    </li>
                    <li><a href="#" title="Green theme">Green theme</a>
                    </li>
                    <li><a href="#" title="Grey theme">Grey theme</a>
                    </li>
                    <li><a href="#" title="Orange theme">Orange theme</a>
                    </li>
                    <li class="sublast"><a href="#" title="Red theme">Red theme</a>
                    </li>
                </ul>
            </li>
            <li class="sublast"><a href="#" title="Toolbars template"><img src="http://css3menu.com/images/reflex-black-vertical/universal6.png" alt=""/>Toolbars template</a>
            </li>
        </ul>
    </li>
    <li class="toplast"><a href="#" title="Download" style="width:146px;"><img src="http://css3menu.com/images/reflex-black-vertical/install.png" alt=""/>Download</a>
    </li>
</ul>
<p class="_css3m"><a href="http://css3menu.com/" target="_blank">CSS3 Button </a>
</p>
<p class="_css3m"><a href="http://jelasinblog.blogspot.com/2014/05/kumpulan-dropdown-menu-tanpa-javascript.html">Back to Tutorial </a>
</p>
<!-- End section -->

CSS 

ul#css3menu1, ul#css3menu1 ul {
    margin:0;
    list-style:none;
    padding:0;
    background-color:#FFFFFF;
    border-width:0;
    border-style:solid;
    border-color:;
}
ul#css3menu1 ul {
    visibility:hidden;
    position:absolute;
    left:200%;
    top:0;
    opacity:0;
    -moz-transition:all 0.5s;
    -webkit-transition:opacity 0.5s, left 0.5s;
    -o-transition:opacity 0.5s, left 0.5s, visibility 0.5s;
    transition:opacity 0.5s, left 0.5s;
    -moz-box-shadow:0px 0px 2px #000;
    -webkit-box-shadow:0px 0px 2px #000;
    box-shadow:0px 0px 2px #000;
    background-color:#3e3f41;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    padding:0;
}
ul#css3menu1 li:hover>ul {
    visibility:visible;
    opacity:1;
}
ul#css3menu1 li {
    position:relative;
    display:block;
    white-space:nowrap;
    font-size:0;
}
ul#css3menu1 li:hover {
    z-index:1;
}
ul#css3menu1 ul ul {
    position:absolute;
    left:200%;
    top:0;
}
ul#css3menu1>li:hover>ul {
    left:100%;
}
ul#css3menu1 ul li:hover>ul {
    left:100%;
}
ul#css3menu1 {
    font-size:0;
    z-index:999;
    position:relative;
    display:block;
    float:left;
    padding:0 4px 0 0;
    background-color:#6f7474;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
ul#css3menu1>li {
    margin:0;
}
ul#css3menu1 a:active, ul#css3menu1 a:focus {
    outline-style:none;
}
ul#css3menu1 a {
    display:block;
    vertical-align:middle;
    text-align:left;
    text-decoration:none;
    font:bold 14px'Scada', Lucida Sans Unicode, Lucida Grande, sans-serif;
    color:#FFF5A5;
    text-shadow:1px 1px 1px rgba(0, 0, 0, 0.9);
    cursor:pointer;
    padding:3px;
    background-color:;
    background-repeat:repeat;
    border-width:0px;
    border-style:none;
    border-color:;
}
ul#css3menu1 ul li {
    float:none;
    margin:0;
}
ul#css3menu1 ul a {
    text-align:left;
    padding:7px;
    -moz-box-shadow:0;
    -webkit-box-shadow:0;
    box-shadow:0;
    background-color:transparent;
    background-image:none;
    border-width:1px 0 1px 0;
    border-style:solid;
    border-color:#545557 transparent #303132 transparent;
    font:13px'Scada', Lucida Sans Unicode, Lucida Grande, sans-serif;
    color:#FFF5A5;
    text-decoration:none;
}
ul#css3menu1 li:hover>a, ul#css3menu1 li a.pressed {
    border-style:none;
    color:#FFFFFF;
    text-shadow:1px 1px 1px rgba(0, 0, 0, 0.9);
    text-decoration:none;
}
ul#css3menu1 img {
    border:none;
    vertical-align:middle;
    margin-right:3px;
}
ul#css3menu1 span {
    display:block;
    overflow:visible;
    background-image:url("arrowsub.png");
    background-position:right center;
    background-repeat:no-repeat;
    padding-right:30px;
}
ul#css3menu1 ul span {
    background-image:url("arrowsub.png");
    padding-right:22px;
}
ul#css3menu1 ul li:hover>a, ul#css3menu1 ul li a.pressed {
    -moz-box-shadow:;
    -webkit-box-shadow:;
    box-shadow:;
    background-color:transparent;
    background-image:-o-linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0));
    background-image:-moz-linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0));
    background-image:linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0));
    background-image:-webkit-linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0));
    border-style:solid;
    border-color:#545557 transparent #303132 transparent;
    color:#FFFFFF;
    text-decoration:none;
    filter:progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr=#00000000, endColorstr=#4DFFFFFF)
}
ul#css3menu1>li>a {
    padding:9px 15px;
}
ul#css3menu1 li.topfirst>a {
    background-color:#393d3e;
    background-image:-o-linear-gradient(-90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    background-image:-moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    background-image:linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    background-image:-webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    border-width:1px;
    border-style:solid;
    border-color:#464a4a #474b4c #2b2e2e #474b4c;
    border-radius:3px 3px 0 0;
    -moz-border-radius:3px 3px 0 0;
    -webkit-border-radius:3px;
    -webkit-border-bottom-right-radius:0;
    -webkit-border-bottom-left-radius:0;
    padding:9px 15px;
    filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#21FFFFFF, endColorstr=#00FFFFFF)
}
ul#css3menu1 li.topfirst:hover>a, ul#css3menu1 li.topfirst a.pressed {
    background-color:#333738;
    background-image:-o-linear-gradient(135deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    background-image:-moz-linear-gradient(135deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    background-image:linear-gradient(45deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    background-image:-webkit-linear-gradient(135deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    border-style:solid;
    border-color:#464a4a #474b4c #2b2e2e #474b4c;
    filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#00555555, endColorstr=#7FEEEEEE)
}
ul#css3menu1 li.topmenu>a {
    background-color:#393d3e;
    background-image:-o-linear-gradient(-90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    background-image:-moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    background-image:linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    background-image:-webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    border-width:1px;
    border-style:solid;
    border-color:#464a4a #474b4c #2b2e2e #474b4c;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    padding:9px 15px;
    filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#21FFFFFF, endColorstr=#00FFFFFF)
}
ul#css3menu1 li.topmenu:hover>a, ul#css3menu1 li.topmenu a.pressed {
    background-color:#333738;
    background-image:-o-linear-gradient(135deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    background-image:-moz-linear-gradient(135deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    background-image:linear-gradient(45deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    background-image:-webkit-linear-gradient(135deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    border-style:solid;
    border-color:#464a4a #474b4c #2b2e2e #474b4c;
    filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#00555555, endColorstr=#7FEEEEEE)
}
ul#css3menu1 li.toplast>a {
    background-color:#393d3e;
    background-image:-o-linear-gradient(-90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    background-image:-moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    background-image:linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    background-image:-webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    border-width:1px;
    border-style:solid;
    border-color:#464a4a #474b4c #2b2e2e #474b4c;
    border-radius:0 0 3px 3px;
    -moz-border-radius:0 0 3px 3px;
    -webkit-border-radius:0;
    -webkit-border-bottom-right-radius:3px;
    -webkit-border-bottom-left-radius:3px;
    padding:9px 15px;
    filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#21FFFFFF, endColorstr=#00FFFFFF)
}
ul#css3menu1 li.toplast:hover>a, ul#css3menu1 li.toplast a.pressed {
    background-color:#333738;
    background-image:-o-linear-gradient(135deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    background-image:-moz-linear-gradient(135deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    background-image:linear-gradient(45deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    background-image:-webkit-linear-gradient(135deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    border-style:solid;
    border-color:#464a4a #474b4c #2b2e2e #474b4c;
    filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#00555555, endColorstr=#7FEEEEEE)
}
ul#css3menu1 li.subfirst>a {
    border-width:0 0 1px 0;
    border-radius:3px 3px 0 0;
    -moz-border-radius:3px 3px 0 0;
    -webkit-border-radius:3px;
    -webkit-border-bottom-right-radius:0;
    -webkit-border-bottom-left-radius:0;
}
ul#css3menu1 li.sublast>a {
    border-width:1px 0 0 0;
    border-radius:0 0 3px 3px;
    -moz-border-radius:0 0 3px 3px;
    -webkit-border-radius:0;
    -webkit-border-bottom-right-radius:3px;
    -webkit-border-bottom-left-radius:3px;
}

Dua contoh di atas sudah cukup memberi gambaran bagaimana menciptakan dropdown menu tanpa JavaScript/jQuery. Lebih lanjut Kumpulan Dropdown Menu tanpa JavaScript dapat Anda eksplorasi dihttp://css3menu.com

Selamat belajar :)