Powered by Blogger.

Membuat Menu Dropdown

Menu Drop down merupakan sebuah menu yang di gunakan oleh pemilik web untuk menampilkan mempercantik tampilan halaman web. dengan adanya menu drop down mempermudah para pengunjung untuk melihat isi dari halaman web tersebut.
berikut listing untuk membuat sebuah menu drop down. copy pastekan ke HTML anda :
untuk demo dapat anda lihat di TKP


<style>
    #menunavigasihorisontal {
        background: #848484;
        width: 100%;
   
        color: #FFF;
            margin: 10px 0;
            padding: 0;
            position: relative;
            border-top:0px solid #960100;
            height:35px; }

    #dwnav {
        margin: 0;
        padding: 0;}
    #dwnav ul {
        float: left;
        list-style: none;
        margin: 0;
        padding: 0;}
    #dwnavli {
        list-style: none;
        margin: 0;
        padding: 0;}
    #dwnav li a, #dwnav li a:link, #dwnav li a:visited {
        color: #FFF;
        display: block;
       font:bold 12px Helvetica, sans-serif;
       margin: 0;
        padding: 9px 12px 11px 12px;
            text-decoration: none;
            border-right:0px solid #627AAD;}
    #dwnav li a:hover, #dwnav li a:active {
        background: #2E9AFE;
        color: #FFF;
        display: block;
        text-decoration: none;
            margin: 0;
        padding: 9px 12px 11px 12px;}

    #dwnav li {
        float: left;
        padding: 0;}
    #dwnav li ul {
        z-index: 9999;
        position: absolute;
        left: -999em;
        height: auto;
        width: 160px;
        margin: 0;
        padding: 0;}
    #dwnav li ul a {
        width: 140px;}
    #dwnav li ul ul {
        margin: -25px 0 0 161px;}

    #dwnav li:hover ul ul, #dwnav li:hover ul ul ul, #dwnav

li.sfhover ul ul, #dwnav li.sfhover ul ul ul {
        left: -999em;}
    #dwnav li:hover ul, #dwnav li li:hover ul, #dwnav li li

li:hover ul, #dwnav li.sfhover ul, #dwnav li li.sfhover ul, #dwnav

li li li.sfhover ul {
        left: auto;}
    #dwnav li:hover, #dwnav li.sfhover {
        position: static;}
    #dwnav li li a, #dwnav li li a:link, #dwnav li li a:visited {
        background: #EDEFF4;
        width: 120px;
        color: #3B5998;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        margin: 1px 0 0 0;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;}
    #dwnav li li a:hover, #dwnav li li a:active {
        background: #627AAD;
        color: #FFF;
        display: block;}
    #dwnav li li li a, #dwnav li li li a:link, #dwnav li li li

a:visited {
        background: #EDEFF4;
        width: 120px;
        color: #3B5998;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;
        margin: 1px 0 0  -14px;}
    #dwnav li li li a:hover, #dwnav li li li a:active {
        background: #627AAD;
        color: #FFF;
        display: block;}

    </style>
    <div id='menunavigasihorisontal'>
              <ul id='dwnav'>
                <li> <a href="http://baraxcom.blogspot.com">Home</a></li>
                <li>
                <li>
                <a href="http://baraxcom.blogspot.com/2012/08/komputer.html">Komputer </a>
                     <ul>
<li><a href="http://baraxcom.blogspot.com/2012/08/ms-word.html">Ms. Word</a></li>
<li><a href="http://baraxcom.blogspot.com/2012/08/ms-excel.html">Ms. Excel</a></li>
<li><a href="http://baraxcom.blogspot.com/2012/08/internet.html">Internet</a></li>
<li><a href="http://baraxcom.blogspot.com/2012/08/video-editing.html">Video Editing </a></li>
</ul>
</li>
<li><a href=" http://baraxcom.blogspot.com ">Workshop </a>                 <ul>
 <li><a href="http://baraxcom.blogspot.com/2012/08/internet_22.html">Internet </a></li>
<li><a href="http://baraxcom.blogspot.com/2012/08/program-aplikasi.html">Program Aplikasi</a></li>
</ul>
</li>
<li><a href=" http://baraxcom.blogspot.com ">Software Sekolah</a>  <ul>
<li><a href="http://baraxcom.blogspot.com/2012/08/program-pengolahan-nilai_22.html">Program Pengolahan Nilai </a></li>
<li><a href="http://baraxcom.blogspot.com/2012/08/program-pendataaan-siswa.html">Program Pendataan Siswa </a></li>
<li><a href="http://baraxcom.blogspot.com/2012/08/program-perpustakaan.html">Program Perpustakaan</a></li>
<li><a href="http://baraxcom.blogspot.com/2012/08/program-bk.html">Program BK</a></li>

                      </ul> <li>
<li><a href="http://baraxcom.blogspot.com/2012/08/tutorial-blog.html">Tutorial Blog</a></li>
                  </li>

<li><a href="http://baraxcom.blogspot.com/2012/09/baraxcom.html">Owner Blog</a></li>
                  </li>
 </li></ul> <li>
</li></div>

jangan lupa alamat linknya anda rubah terlebih dahulu sesuai dengan alamat web anda



Artikel Terkait:

0 komentar:

Back Link

AutoBacklinkGratisjapanese instant free backlinkFree Plugboard Link Banner ButtonMalaysia Free Backlink ServicesFree Promotion LinkMAJLIS LINK: Do Follow BacklinkLink Portal Teks TVFree Smart Automatic BacklinkFree Automatic Backlink Serviceinstant backlinksocial networkingAdd URL Suggest Linklintas berita network Auto Backlink Gratis Indonesia : Top Link Indo

  © Newspaper III by Ourblogtemplates.com Edited by CH BARA

Back to TOP