Contoh menu dropdown hanya menggunakan CSS

Berikut ini saya akan berikan contoh menu dropdown bertingkat menggunakan CSS dan HTML. Menu ini sangat simpel dan mudah dipakai. Selain itu contoh menu ini sangat bagus desainnya sehingga cocok dipakai untuk webiste apa saja. Silahkan ambil kodenya di bawah ini:

<html>
<head>
	<title>Contoh Menu CSS</title>
	<style type="text/css">
		#nav {
		    float: right;
		    margin: 15px 0 0 0;
		}

		#nav > li {
		    float: left;
		}

		#nav li a {
		    display: block;
		    padding: 10px 20px;
		    font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif;
		    font-size: 16px;
		    text-decoration: none;
		    color: #2B95C8;
		    white-space: nowrap;
		}

		#nav li:hover a {
		    color:#fff;
		    -moz-border-radius: 5px 5px 0 0;
		    -webkit-border-radius: 5px 5px 0 0;
		    border-radius: 5px 5px 0 0;
		}

		#nav li ul li a {
		    color:#fff;
		}

		.dropdown_alignedLeft, .dropdown_alignedRight {
		    position: relative;
		}

		#nav > ul {
		    -moz-border-radius: 0 5px 5px 5px;
		    -webkit-border-radius: 0 5px 5px 5px;
		    border-radius: 0 5px 5px 5px;
		    color: #FFFFFF;
		}

		.dropdown_alignedLeft ul, .dropdown_alignedRight ul {
		    display: none;
		}

		#nav .dropdown_alignedLeft:hover > ul, #nav .dropdown_alignedRight:hover > ul {
		    display: block;
		    z-index: 100;
		    position: absolute;
		    top: 100%;          
		    -moz-border-radius: 0 5px 5px 5px;
		    -webkit-border-radius: 0 5px 5px 5px;
		    border-radius: 0 5px 5px 5px;
		}

		#nav .dropdown_alignedRight:hover > ul {
		    top: 0;
		    left: 100%;
		}

		#nav li ul li.dropdown_innerTitle {
		    padding: 10px 0;
		    border: none;
		    margin: 10px 20px 0 20px;
		}

		#nav li ul li.dropdown_lastItem {
		    border: none;
		}

		#nav > li:hover > a, #nav li .current_page {
		    background: url("../images/current_page_arrow_blue.png") no-repeat center bottom;
		}

		#nav .dropdown_alignedLeft > a, #nav .dropdown_alignedRight > a {
		    background: url("../images/dropdown_arrow_blue.png") no-repeat top right;
		}

		#nav .dropdown_alignedLeft:hover > a, #nav .dropdown_alignedRight:hover > a {
		    background: #2378A1 url("../images/dropdown_arrow_blue.png") no-repeat bottom right;
		}

		#nav .dropdown_alignedLeft:hover > ul, #nav .dropdown_alignedRight:hover > ul {
		    background: #2378A1;
		}
		    
		#nav li ul li {
		    border-bottom: 1px dashed #2B95C8;
		}

		#nav li ul li.dropdown_innerTitle {
		    color: #C8DDE7;
		}

		#nav li ul li a:hover {
		    color: #C8DDE7;
		}

		#nav li a.last {
		    -moz-border-radius: 0 0 5px 5px;
		}
		#nav li ul li {
			border-bottom: 1px dashed #2B95C8;
			margin-left: -40px;
			list-style: none;
		}
	</style>
</head>
<body>
<ol id="nav">
    <li>
        <a href="index.php">Home</a>
    </li>
    <li class="dropdown_alignedLeft">
        <a href="">Products</a>
        <ul>
            <li class="dropdown_alignedRight">
                <a href="">iPoP</a>
                <ul>
                    <li>
                        <a href="customers.php?category=ipop">iPoP - Network Solutions for Vessels</a>
                    </li>
                </ul>
            </li>
            <li class="dropdown_alignedRight">
                <a href="">Cameras</a>
                <ul>
                    <li>
                        <a href="customers.php?category=icam">iCam 501 Ultra - Intrinsically Safe Digital Camera with Flash</a>
                    </li>
                </ul>
            </li>
            <li class="dropdown_alignedRight">
                <a href="">BNWAS</a>
                <ul>
                    <li>
                        <a href="customers.php?category=bnwas">BNWAS - Bridge Navigation Watch Alarm System</a>
                    </li>
                </ul>
            </li>
            <li class="dropdown_alignedRight">
                <a href="">Lighting</a>
                <ul>
                    <li>
                        <a href="customers.php?category=peli">Peli 2690 - Intrinsically Safe LED Head Lamp</a>
                    </li>
                </ul>
            </li>
            <li class="dropdown_alignedRight">
                <a class="last" href="">Communication</a>
                <ul>
                    <li>
                        <a href="customers.php?category=handy">Ex-Handy 06 - Intrinsically Safe Cell Phone</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="dropdown_alignedLeft">
        <a href="">Customers</a>
        <ul>
            <li>
                <a href="customers.php?category=maritime">Maritime</a>
            </li>
            <li>
                <a href="customers.php?category=non">Non-Maritime</a>
            </li>
            <li class="dropdown_lastItem">
                <a href="customers.php?category=organizations">Regulatory Organizations</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="order.php">Product Enquiry</a>
    </li>
    <li>
        <a href="contact.php">Contact Us</a>
    </li>
    <li class="dropdown_alignedLeft">
        <a href="">Company</a>
        <ul>
            <!-- <li><a href="">About Us</a></li> -->
            <li><a href="newsandpr.php?category=News">News</a></li>
            <li class="dropdown_lastItem"><a href="newsandpr.php?category=Press Release">Press Releases</a></li>
        </ul>
    </li>
</ol>
</body>
</html>

Demo : http://jsfiddle.net/MmHSd/4/

(Visited 2,586 times, 1 visits today)

Related Posts

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

WhatsApp chat