Pasang menu menu horizontal dengan dropdown


Cari kode ]]><b/skin> dan letakkan kode di bawah ini di atas kode ]]></b:skin>
.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font: 67.5% “Lucida Sans Unicode”, “Bitstream Vera Sans”, “Trebuchet Unicode MS”, “Lucida Grande”, Verdana, Helvetica, sans-serif;

font-size:14px;

font-weight:bold;

}

.menu ul{

background:#333333;

height:35px;

list-style:none;

margin:0;

padding:0;

}

.menu li{

float:left;

padding:0px;

}

.menu li a{

background:#333333 url(“http://4.bp.blogspot.com/_9YclB8eEa7s/SzsQsPxyTLI/AAAAAAAAAhs/NzT86bVgMIc/seperator.gif”) bottom right no-repeat;

color:#cccccc;

display:block;

font-weight:normal;

line-height:35px;

margin:0px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

.menu li a:hover, .menu ul li:hover a{

background: #2580a2 url(“http://3.bp.blogspot.com/_9YclB8eEa7s/SzsQUktvwaI/AAAAAAAAAhc/MKBqe8dSrNY/hover.gif”) bottom center no-repeat;

color:#FFFFFF;

text-decoration:none;

}

.menu li ul{

background:#333333;

display:none;

height:auto;

padding:0px;

margin:0px;

border:0px;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*left:0;*/

}

.menu li:hover ul{

display:block;



}

.menu li li {

background:url(‘http://1.bp.blogspot.com/_9YclB8eEa7s/SzsQ7UYy2jI/AAAAAAAAAh0/aQKCfGmlaYY/sub_sep.gif’) bottom left no-repeat;

display:block;

float:none;

margin:0px;

padding:0px;

width:225px;

}

.menu li:hover li a{

background:none;



}

.menu li ul a{

display:block;

height:35px;

font-size:12px;

font-style:normal;

margin:0px;

padding:0px 10px 0px 15px;

text-align:left;

}

.menu li ul a:hover, .menu li ul li:hover a{

background:#2580a2 url(‘http://2.bp.blogspot.com/_9YclB8eEa7s/SzsQg1Q5dmI/AAAAAAAAAhk/SZhqOnBKIAY/hover_sub.gif’) center left no-repeat;

border:0px;

color:#ffffff;

text-decoration:none;

}

.menu p{

clear:left;

}
Copy kode di bawah ini :
<div class=”menu”>
        <ul>
            <li><a href=”#” >Home</a></li>
            <li><a href=”#” id=”current”>Menu 1</a>
                <ul>
                    <li><a href=”#”>Sub Menu 1</a></li>
                    <li><a href=”#”>Sub Menu 2</a></li>
                    <li><a href=”#”>Sub Menu 3</a></li>
                    <li><a href=”#”>Sub Menu 4</a></li>
               </ul>
          </li>
            <li><a href=”#”>Menu 2</a>
                <ul>
                <li><a href=”#”>Sub Menu 1</a></li>
                <li><a href=”#”>Sub Menu 2</a></li>
                <li><a href=”#”>Sub Menu 3</a></li>
                <li><a href=”#”>Sub Menu 4</a></li>
                </ul>
          </li>
            <li><a href=”#”>About</a></li>
        </ul>
    </div>
dan paste di
elemen laman=>HTML
ganti "#" dgn url tujuan anda 
<div id=’outer-wrapper’><div id=’wrap2′>  
Jika ingin meletakkan menu tersebut di puncak template anda.
<div id=’main-di bawah kode/script <div id=’header-wrapper’> : Jika wrapper’> : Jika ingin diletakkan di atas halaman posting/artikel.
Atau letakkan ngin diletakkan tepat di bawah header.
Jangan lupa ganti link dan nama menu dengan keinginan anda.

0 komentar "Pasang menu menu horizontal dengan dropdown", Baca atau Masukkan Komentar

Posting Komentar

Jika artikel ini bermanfaat bisa dishare gan, tapi ingat selalu cantumkan sumber jika ingin copas artikel ini