Advertise Here Latest Stories Menu : Choose category Android ( 2 ) Toko 8 Saudara ( 3 ) Tutorial Blog ( 35 ) Business Sports " });
Tutorial Blog Sunrise Gloss Drop Down Menus Unknown - 12.21 بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ 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/AVvXsEgEjZlrbS6cxJAmt_InfMi2W2j2ae-foX50ZLwLgrK7PZqbJKKEWnMjntBshMWXDyrPEsltHCM0L8RwIqg-omzxCatgGMCLpYoRSOKZVsIPbMnNLCynob0pn1YPuqzEIDYI0EKUD0dzxUQS/s1600/nav-bg-l.jpg" alt="" class="float-left" /><br /> <br /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFBn7zVK7C3BRxs5i2pEye6PWAtTOh0EsdPSxNsaNzHToeDttGbQRHj5yiz7yZg4iBDRmWfIl865Zp6Pn7AD_Qq1qHcCkOQEyQ-RBKvaFJzTxWbcZlJ3snkoIfavlpWn24LE3SZAQ3Yw0m/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/AVvXsEgrTzV3GCepBuHKSvh16gIllFMqZ3Ed2QhGPKrQu1TaSvK9S_DxOyJ3ghhE2aOGBDC-Y0CbOGunPXeJ92QO8fVYkCwza6Kr1na1USXO5kAsxgWLwmzE_YGkwyQlY3Zhq7gfh6s0Fz9Jteoz/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/AVvXsEhxDH-UDXp2aunsRrqey2c3Peh5Tw6ZghZ2r-3D_wVFsmUQdlUWxZBQms1-iAQ81Hi1f2iv_ySaFJHJgzTqaR57RZuhyphenhyphenUXdg869iN_mgFmOPdOCGMbwEz9OXyJfOSMPxa72naEkaB1oVmEI/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/AVvXsEhxDH-UDXp2aunsRrqey2c3Peh5Tw6ZghZ2r-3D_wVFsmUQdlUWxZBQms1-iAQ81Hi1f2iv_ySaFJHJgzTqaR57RZuhyphenhyphenUXdg869iN_mgFmOPdOCGMbwEz9OXyJfOSMPxa72naEkaB1oVmEI/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/AVvXsEhZj6j4Jv1lianq7EPTyoTw3LyKwgr4eUD40rseMUNeV-o5SNaydt8RJndI95gXh7jy7J9jal1W0Z6ju4PZpbjN9ikMST0UUAn7sUjGxYIpAcciZ9stQXdxBjIt-OaIdKa-c8VJUtDjYLVf/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/AVvXsEi0ujwxNrj7CxS2tiDRkCULAHf7K8QBYDfnGuY8t68aanICTJqbf-kML7WTGhz2JU2X1oBrwXQCB6WA0pSL4i9FB658_XsskdXz8Gpm6WbBUYS2p_Te05NLAmyFJ9R5XwkhBRxdeEUkMk2N/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/AVvXsEi0ujwxNrj7CxS2tiDRkCULAHf7K8QBYDfnGuY8t68aanICTJqbf-kML7WTGhz2JU2X1oBrwXQCB6WA0pSL4i9FB658_XsskdXz8Gpm6WbBUYS2p_Te05NLAmyFJ9R5XwkhBRxdeEUkMk2N/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/AVvXsEhH3EC77938_-PLzdN2_B6K-4lUM5hs3L3PQTOGPp6_ywxZJNeg1ILhUKhYXk0_xngMNRktjuwRpZl2A5qct7nV94v0KuWkq1-QYfCqLN0xjnJ7R0AJ9824iAl8-aE8xtCPJubN7I3Qyqzk/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 /> } Share Twitter Google+ Facebook Enjoyed this list?
0 komentar:
Posting Komentar