Menu dan submenu atau yang lebih familiar dengan nama menu dropdown merupakan kelanjutan dari menu yang lainnya yang pernah saya entri.[read cara membuat menu horizontal sederhana di blog]. Adapun yang saya maksud dengan menu dan submenu yaitu seperti gambar di bawah.
Adapun langkahnya, sama seperti kita membuat menu yang lainnya, yaitu:1. Login dan masuk ke 'perancangan' -- 'edit HTML'
2. Cari kode ]]></b:skin> dan tempatkan script CSS di bawah sebelum kode tersebut (silakan copy)
.menus,.menus *{margin:0;padding:0;list-style:none;list-style-type:none;line-height:1.0}3. Lalu cari kode </header> dan tempatkan kode HTML di bawah sebelum kode itu </header> atai atas kode </header>. atau terserah Anda mau dipasang dimana., silakan copy
.menus ul{position:absolute;top:-999em;width:100%}
.menus ul li{width:100%}
.menus li:hover{visibility:inherit}
.menus li{float:left;position:relative}
.menus a{display:block;position:relative}
.menus li:hover ul,.menus li.sfHover ul{left:0;top:100%;z-index:99}
.menus li:hover li ul,.menus li.sfHover li ul{top:-999em}
.menus li li:hover ul,.menus li li.sfHover ul{left:100%;top:0}
.menus li li:hover li ul,.menus li li.sfHover li ul{top:-999em}
.menus li li li:hover ul,.menus li li li.sfHover ul{left:100%;top:0}
.sf-shadow ul{padding:0 8px 9px 0;-moz-border-radius-bottomleft:17px;-moz-border-radius-topright:17px;-webkit-border-top-right-radius:17px;-webkit-border-bottom-left-radius:17px}
.menus .sf-shadow ul.sf-shadow-off{background:transparent}
.menu-secondary-container{position:relative;height:40px;z-index:300;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilP70tEiKw7GFB2bvZyESb_eySbxJjQju8cba5BeL9BkWPDmVoBc3EfPt7jul06LSmngn5MqCkrVqx0vb3QTNjs2H7AfeiIgJ6Wn4I1-7iS43krq6nlw5nJ9ptBgru4Ghyphenhyphen-EbdwcVu8roz/s0/menu-secondary-bg.png) left top repeat-x;margin:15px 0 15px 0}
.menu-secondary{}
.menu-secondary ul{min-width:160px}
.menu-secondary li a{color:#FFF;padding:14px 15px 11px 15px;text-decoration:none;text-transform:uppercase;font:bold 12px Arial,Helvetica,Sans-serif}
.menu-secondary li a:hover,.menu-secondary li a:active,.menu-secondary li a:focus,.menu-secondary li:hover > a,.menu-secondary li.current-cat > a,.menu-secondary li.current_page_item > a,.menu-secondary li.current-menu-item > a{color:#FFF;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilP70tEiKw7GFB2bvZyESb_eySbxJjQju8cba5BeL9BkWPDmVoBc3EfPt7jul06LSmngn5MqCkrVqx0vb3QTNjs2H7AfeiIgJ6Wn4I1-7iS43krq6nlw5nJ9ptBgru4Ghyphenhyphen-EbdwcVu8roz/s0/menu-secondary-bg.png) left -140px repeat-x;outline:0}
.menu-secondary li li a{color:#fff;background:#E8202D;padding:10px 15px;text-transform:none;margin:0;font-weight:normal}
.menu-secondary li li a:hover,.menu-secondary li li a:active,.menu-secondary li li a:focus,.menu-secondary li li:hover > a,.menu-secondary li li.current-cat > a,.menu-secondary li li.current_page_item > a,.menu-secondary li li.current-menu-item > a{color:#fff;background:#F8424E;outline:0}
.menu-secondary a.sf-with-ul{padding-right:26px;min-width:1px}
.menu-secondary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:13px 13px 0 0}
.menu-secondary li li .sf-sub-indicator{padding:9px 13px 0 0}
.wrap-menu-secondary .sf-shadow ul{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjColw3u0_egMNP17ITKsvF7D0iFbgNs-NsqHyKH2GjMQGRoFjtSpakao68eFMkaKtbfYkH2eD7w9Je7U72-E2wQYqrRfoMYRuStm6ROuIdRt1TaF4ktn4rYmwV8XrWcR3z3M5O0GuNQN_S/s0/menu-secondary-shadow.png') no-repeat bottom right}
<div class='menu-secondary-container'>4. Save template. dan lihat hasilnya.
<ul class='menus menu-secondary'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Business</a>
<ul class='children'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>
<li><a href='#'>Downloads</a>
<ul class='children'>
<li><a href='#'>Dvd</a></li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Software</a>
<ul class='children'>
<li><a href='#'>Office</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Parent Category</a>
<ul class='children'>
<li><a href='#'>Child Category 1</a>
<ul class='children'>
<li><a href='#'>Sub Child Category 1</a></li>
<li><a href='#'>Sub Child Category 2</a></li>
<li><a href='#'>Sub Child Category 3</a></li>
</ul>
</li>
<li><a href='#'>Child Category 2</a></li>
<li><a href='#'>Child Category 3</a></li>
<li><a href='#'>Child Category 4</a></li>
</ul>
</li>
<li><a href='#'>Featured</a></li>
<li><a href='#'>Health</a>
<ul class='children'>
<li><a href='#'>Childcare</a></li>
<li><a href='#'>Doctors</a></li>
</ul>
</li>
<li><a href='http://prabudx.blogspot.com'>Tutorial Blog</a></li></ul>
</div>
5. Jika ada permasalahan, silakan komentarnya.
makasih gan... ini code html asli bawaan template ane, udah pusing salah mulu pas edit untung nyasar di blog ini... makasih yaa gan
BalasHapusgörüntülü show
BalasHapusücretlishow
ZRC1NR
https://titandijital.com.tr/
BalasHapuskars parça eşya taşıma
konya parça eşya taşıma
çankırı parça eşya taşıma
yalova parça eşya taşıma
V1C