Sunrise Gloss Drop Down Menus

  بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ 

• Login ke blogspot kamu.
• Klik rancangan.
• Klik add gadget
• Pilih HTML/JavaScript
• Masukkan kode dibawah ini:

<div class="nav-container-outer"> <br /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0aR_tciY2AV9dOEjmhqICgiVo3EFT2WoGFsifnUq6iSHmUySqhKiMxN8Zfp9bRzixRs1ToW9xnfi1Oqi2vK1BX7BKM-q4Y9CZfUtwEoKRrLfom3IsQhJ-pfeqaRe_4L6wY6pbrdrGm3yS/s1600/nav-bg-l.jpg" alt="" class="float-left" /><br /> <br /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwAap6buoWU3THalPkILVqOvTbEUekHxlzWZtK52TO6M9-0jtvK4yZy2QQjDTT6bhA4cS2-jtqEOcWmf8TaBQPHWjB8ltbyPBs6QHalpU_o0tuyPJsW4oYtw-ao4hCBDvE-4hA681P2Tp_/s1600/nav-bg-r.jpg" alt="" class="float-right" /><br /> <br /> <ul id="nav-container" class="nav-container"> <li><a class="item-primary" href="#">HOME</a><br /> <br /> </li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#">Products</a><br /> <br /> <br /> <br /> <ul style="width:150px;"> <li><a href="#">SoftwarePlus</a></li> <li><a href="#">MagicDriver</a></li> <li><a href="#">GreatFX</a></li> <li><a href="#">SampleSoft</a></li> <li><a href="#">UnDoIt</a></li> <li><a href="#">100% CSS Menu</a></li> <li><a href="#;">With Cross-Browser</a></li> <li><a href="#;">Dropdowns</a></li> <li><a href="#;">Absolutely NO Javascript</a></li> <li><a href="#;">Being Used On</a></li> <li><a href="#;">These Menus</a></li> <li><span class="divider divider-horiz" ></span></li> <li><a href="#;">Example Of a Divider</a></li> <li><a href="#;">With No Title</a></li> </ul> </li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#">Quality</a><br /> <br /> <br /> <br /> <ul style="width:150px;"> <li><a href="#">SoftwarePlus</a></li> <li><a href="#">MagicDriver</a></li> <li><a href="#">GreatFX</a></li> <li><a href="#">SampleSoft</a></li> <li><a href="#">UnDoIt</a></li> <li><a href="#">100% CSS Menu</a></li> <li><a href="#;">With Cross-Browser</a></li> <li><a href="#;">Dropdowns</a></li> <li><a href="#;">Absolutely NO Javascript</a></li> <li><a href="#;">Being Used On</a></li> <li><a href="#;">These Menus</a></li> <li><span class="divider divider-horiz" ></span></li> <li><a href="#;">Example Of a Divider</a></li> <li><a href="#;">With No Title</a></li> </ul> </li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#">Services</a><br /> <br /> <br /> <br /> <ul style="width:150px;"> <li><span class="item-secondary-title" >Title For Links</span></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> <li><span class="divider divider-horiz" ></span></li> <li><span class="item-secondary-title" >Title After Divider</span></li> <li><a href="#">Once Again...</a></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> </ul> </li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#;">Very Long Item</a><br /> <br /> <br /> <br /> <ul style="width:150px;"> <li><span class="item-secondary-title" >Title For Links</span></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> <li><span class="divider divider-horiz" ></span></li> <li><span class="item-secondary-title" >Title After Divider</span></li> <li><a href="#">Once Again...</a></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> </ul> </li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#;">Fully Flexible</a><br /> <br /> <br /> <br /> <ul style="width:150px;"> <li><span class="item-secondary-title" >Title For Links</span></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> <li><span class="divider divider-horiz" ></span></li> <li><span class="item-secondary-title" >Title After Divider</span></li> <li><a href="#">Once Again...</a></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> </ul> </li> <li class="clear"> </li> </ul> <br /> </div>

Letakan kode dibawah ini di atas kode ]]></b:skin>

<br /> @charset "utf-8";<br /> <br /> /* CSS Document */<br /> <br /> <br /> <br /> body{<br /> <br /> padding: 25px;<br /> <br /> }<br /> <br /> <br /> <br /> /*^'^ Navigation Structure ^'^*/<br /> <br /> .nav-container-outer{<br /> <br /> background: #990000;<br /> <br /> padding: 0px;<br /> <br /> height: 74px;<br /> <br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitHVElcaiNetIJmLN3E6XvZFyckWShqVCApvDaMMoBIBpr957b1LBCK62yxUPo5pZsxuvzV7YZMUMw4zj87GDGbmnEAFX2EYMTy_kZfYAvgGuZ8zakF_24g3yFF5bZhvyOZ3kNIpWGsIWV/s1600/nav-bg.jpg);<br /> <br /> }<br /> <br /> .float-left{<br /> <br /> float: left;<br /> <br /> }<br /> <br /> .float-right{<br /> <br /> float: right;<br /> <br /> }<br /> <br /> .nav-container .divider{<br /> <br /> display:block;<br /> <br /> font-size:1px;<br /> <br /> border-width:0px;<br /> <br /> border-style:solid;<br /> <br /> }<br /> <br /> .nav-container .divider-vert{<br /> <br /> float:left;<br /> <br /> width:0px;<br /> <br /> display: none;<br /> <br /> }<br /> <br /> .nav-container .item-secondary-title{<br /> <br /> display:block;<br /> <br /> cursor:default;<br /> <br /> white-space:nowrap;<br /> <br /> }<br /> <br /> .clear{<br /> <br /> font-size:1px;<br /> <br /> height:0px;<br /> <br /> width:0px;<br /> <br /> clear:left;<br /> <br /> line-height:0px;<br /> <br /> display:block;<br /> <br /> float:none;<br /> <br /> }<br /> <br /> .nav-container{<br /> <br /> position:relative;<br /> <br /> zoom:1;<br /> <br /> margin: 0 auto;<br /> <br /> }<br /> <br /> .nav-container a, .nav-container li{<br /> <br /> float:left;<br /> <br /> display:block;<br /> <br /> white-space:nowrap;<br /> <br /> }<br /> <br /> .nav-container div a, .nav-container ul a, .nav-container ul li{<br /> <br /> float:none;<br /> <br /> }<br /> <br /> .nav-container ul{<br /> <br /> left:-10000px;<br /> <br /> position:absolute;<br /> <br /> }<br /> <br /> .nav-container, .nav-container ul{<br /> <br /> list-style:none;<br /> <br /> padding:0px;<br /> <br /> margin:0px;<br /> <br /> }<br /> <br /> .nav-container li a{<br /> <br /> float:none<br /> <br /> }<br /> <br /> .nav-container li{<br /> <br /> position:relative;<br /> <br /> }<br /> <br /> .nav-container ul{<br /> <br /> z-index:10;<br /> <br /> }<br /> <br /> .nav-container ul ul{<br /> <br /> z-index:20;<br /> <br /> }<br /> <br /> .nav-container ul ul ul{<br /> <br /> z-index:30;<br /> <br /> }<br /> <br /> .nav-container ul ul ul ul{<br /> <br /> z-index:40;<br /> <br /> }<br /> <br /> .nav-container ul ul ul ul ul{<br /> <br /> z-index:50;<br /> <br /> }<br /> <br /> li:hover>ul{<br /> <br /> left:auto;<br /> <br /> }<br /> <br /> #nav-container ul {<br /> <br /> top:100%;<br /> <br /> }<br /> <br /> #nav-container ul li:hover>ul{<br /> <br /> top:0px;<br /> <br /> left:100%;<br /> <br /> }<br /> <br /> <br /> <br /> /*^'^ Primary Items ^'^*/<br /> <br /> #nav-container a{<br /> <br /> padding:7px 17px 7px 18px;<br /> <br /> margin: 10px 0px 0px 0px;<br /> <br /> color: #FFFFFF;<br /> <br /> font-family: Trebuchet MS, Arial, sans-serif, Helvetica;<br /> <br /> font-size:14px;<br /> <br /> text-decoration:none;<br /> <br /> font-weight: bold;<br /> <br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_qf5PTGAC887pO-ug8G5RpfbC41UiNnPqBorGL6tPZAExjzjD24ZetDMdh2QLKRl_58kCn30gS0Vq4j5kAvIrryciULb0XkimcmdwXEacW9wboI6fnSe3okX8SbVp8qBrCG-GHdmXOS_H/s1600/item-primary-bg.gif);<br /> <br /> background-repeat: no-repeat;<br /> <br /> background-position: top;<br /> <br /> }<br /> <br /> <br /> <br /> #nav-container a:hover{<br /> <br /> color: #6C3600;<br /> <br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_qf5PTGAC887pO-ug8G5RpfbC41UiNnPqBorGL6tPZAExjzjD24ZetDMdh2QLKRl_58kCn30gS0Vq4j5kAvIrryciULb0XkimcmdwXEacW9wboI6fnSe3okX8SbVp8qBrCG-GHdmXOS_H/s1600/item-primary-bg.gif);<br /> <br /> background-repeat: no-repeat;<br /> <br /> background-position: center;<br /> <br /> }<br /> <br /> <br /> <br /> /*^'^ Secondary Items Container ^'^*/<br /> <br /> #nav-container div, #nav-container ul{<br /> <br /> padding:10px 4px 10px 4px;<br /> <br /> margin:0px 0px 0px 0px;<br /> <br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyZ5XiCBU9D9YLUMIIgKsikmQWykfS7Ybewtd0jQ82ocWzVrBhUiwBdniYjKZ6N7FMbRvcFpZ6kVRMlb4Bn7hrWAfjP7C8-kiHIBC4gfuapB6UwoRTr06OSRnaa_bftDIjXkRL1ciBPArC/s1600/item-secondary-container-bg.jpg);<br /> <br /> background-repeat: repeat-x;<br /> <br /> background-color: #FF9900;<br /> <br /> border-bottom: 1px solid #CA6500;<br /> <br /> }<br /> <br /> <br /> <br /> /*^'^ Secondary Items ^'^*/<br /> <br /> #nav-container div a, #nav-container ul a{<br /> <br /> padding:3px 10px 3px 6px;<br /> <br /> background-color: #FFFFFF;<br /> <br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR6yYrBxMbkk69zGy40rZLpMr3XmWeBUlLGc2poUSQEFOOLkTPgCzD5Wmgx7OvXB9lS1tlAim38hclogbj_GaUywncWjIIb4U2TRf7Y3u6y2zKuoeuwYxNZd-KgZT-KPnq2whw0IfUvPIH/s1600/item-secondary-bg.jpg);<br /> <br /> background-repeat: no-repeat;<br /> <br /> background-position: 0px 22px;<br /> <br /> font-size:11px;<br /> <br /> border-width:0px;<br /> <br /> border-style:none;<br /> <br /> margin: 0px 0px 0px 0px;<br /> <br /> width: 149px;<br /> <br /> }<br /> <br /> <br /> <br /> /*^'^ Secondary Items Hover State ^'^*/<br /> <br /> #nav-container div a:hover, #nav-container ul a:hover{<br /> <br /> background-color: #FFFFFF;<br /> <br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR6yYrBxMbkk69zGy40rZLpMr3XmWeBUlLGc2poUSQEFOOLkTPgCzD5Wmgx7OvXB9lS1tlAim38hclogbj_GaUywncWjIIb4U2TRf7Y3u6y2zKuoeuwYxNZd-KgZT-KPnq2whw0IfUvPIH/s1600/item-secondary-bg.jpg);<br /> <br /> background-repeat: no-repeat;<br /> <br /> color:#CC0000;<br /> <br /> }<br /> <br /> <br /> <br /> /*^'^ Secondary Item Titles ^'^*/<br /> <br /> #nav-container .item-secondary-title{<br /> <br /> cursor:default;<br /> <br /> padding:4px 0px 3px 7px;<br /> <br /> color: #6C3600;<br /> <br /> font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;<br /> <br /> font-size:11px;<br /> <br /> /* background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnsatvabc2BIq9izCvSOHryPh3F5pde8D0JygLqRDrcqkHv2ziaUsPO5rA4ipkkwfGjhxL-kw5Og_haCDVd9RR3vrVHCNdynCc_6716bAumgOdK8DkWkyiz5uQvARO3-xsixHdHiC6MB8O/s1600/item-secondary-title-bg.jpg); */<br /> <br /> background-repeat: no-repeat;<br /> <br /> font-weight:bold;<br /> <br /> }<br /> <br /> <br /> <br /> /*^'^ Horizontal Dividers ^'^*/<br /> <br /> #nav-container .divider-horiz{<br /> <br /> border-top-width:1px;<br /> <br /> margin:5px 5px;<br /> <br /> border-color: #C16100;<br /> <br /> }<br /> <br /> <br /> <br /> /*^'^ Vertical Dividers ^'^*/<br /> <br /> #nav-container .divider-vert{<br /> <br /> border-left-width:1px;<br /> <br /> height:15px;<br /> <br /> margin:4px 2px 0px 2px;<br /> <br /> border-color:#AAAAAA;<br /> <br /> }

tutor dari many-cara.blogspot.com , thx buat sharenya.

Semoga tutorial singkat ini bisa bermanfaat...

Anti Pelit

                            **Bebas Disunting Dengan Menyebutkan Sumber**

22.07 Share: