Cara buat Drop Down menu Sunrise Gloss - Hallo Sob Jody Blog, artikel kali ini berjudul Cara buat Drop Down menu Sunrise Gloss, kami telah menuliskan yang kami tahu pada artikel ini, semoga bermanfaat.

Judul : Cara buat Drop Down menu Sunrise Gloss
link : Cara buat Drop Down menu Sunrise Gloss

Cara buat Drop Down menu Sunrise Gloss

Cara buat Drop Down menu Sunrise Gloss

Kembali ke Acara Menu me menu bukan Menu sarapan Pagi lol, setelah kemarin membahas Cara buat Drop Down menu Massive Blue dan Cara Mudah buat Menu Melayang di sisi kiri Blog, kembali hadir menemani sobat pecinta Blogspot untuk membahas Cara buat Drop Down menu Sunrise Gloss. Mari kita mulai



Silahkan Lihat Demonya dulu disini : --DEMO--

Berikut cara pasang diblog



Pertama

Klik + Centang

Kedua

Cari kode ]]></b:skin>



Setelah ketemu Letakkan kode berikut diatasnya / Sebelum ]]></b:skin>

@charset "utf-8";

/* CSS Document */



body{

padding: 25px;

}



/*^'^ Navigation Structure ^'^*/

.nav-container-outer{

background: #990000;

padding: 0px;

height: 74px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0MY7NKF45I9Mt7oVj007OJPG5rEezzuxVzNjfIh7Vvi2OtAkTvUop2hAJf1pxBb60Wt5Qg8eAHoV0v-_aTt1v5-wRVcWyiwyu31B0r0YRQU58JMCn-iF7wzyn-RpFKILI37c7mEeNM-M/h120/nav-bg.jpg);

}

.float-left{

float: left;

}

.float-right{

float: right;

}

.nav-container .divider{

display:block;

font-size:1px;

border-width:0px;

border-style:solid;

}

.nav-container .divider-vert{

float:left;

width:0px;

display: none;

}

.nav-container .item-secondary-title{

display:block;

cursor:default;

white-space:nowrap;

}

.clear{

font-size:1px;

height:0px;

width:0px;

clear:left;

line-height:0px;

display:block;

float:none;

}

.nav-container{

position:relative;

zoom:1;

margin: 0 auto;

}

.nav-container a, .nav-container li{

float:left;

display:block;

white-space:nowrap;

}

.nav-container div a, .nav-container ul a, .nav-container ul li{

float:none;

}

.nav-container ul{

left:-10000px;

position:absolute;

}

.nav-container, .nav-container ul{

list-style:none;

padding:0px;

margin:0px;

}

.nav-container li a{

float:none

}

.nav-container li{

position:relative;

}

.nav-container ul{

z-index:10;

}

.nav-container ul ul{

z-index:20;

}

.nav-container ul ul ul{

z-index:30;

}

.nav-container ul ul ul ul{

z-index:40;

}

.nav-container ul ul ul ul ul{

z-index:50;

}

li:hover>ul{

left:auto;

}

#nav-container ul {

top:100%;

}

#nav-container ul li:hover>ul{

top:0px;

left:100%;

}



/*^'^ Primary Items ^'^*/

#nav-container a{

padding:7px 17px 7px 18px;

margin: 10px 0px 0px 0px;

color: #FFFFFF;

font-family: Trebuchet MS, Arial, sans-serif, Helvetica;

font-size:14px;

text-decoration:none;

font-weight: bold;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzFwK9RgtXzdJ0izpxNtm-X5_tpZfqYIj5xM9iZnmXpcB220jyrotCA1u3AwcEX69cIPWElW3AhylFwZ125l9SAtoUKHpplF1CkEIGtCjbw84Jk6aFoweC74IekLMheb_6fiTyQpRRr5U9/s1600/item-primary-bg.gif);

background-repeat: no-repeat;

background-position: top;

}



#nav-container a:hover{

color: #6C3600;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6OOCeJEi4WtxAI82YN8BOMRxmWXMLKd-UEvZImQg8pEd5dGROetb1NT-aWOvpfvnMJkJ48bI9F1tDt1Nw3LfzD6hM60flSeyhUCWi27g2ZPVM0DcR7i_BMIApPFYhC9M_67zGPmDLYZo/h120/item-primary-bg.gif);

background-repeat: no-repeat;

background-position: center;

}



/*^'^ Secondary Items Container ^'^*/

#nav-container div, #nav-container ul{

padding:10px 4px 10px 4px;

margin:0px 0px 0px 0px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1_pk4ck979_QThzeTvMLN0XoxwLnnmYUYL7NwYkgyxc15ielnDdL_Af7ljmvXgVgZdXm6ogl2lts2ob9qLJ5LUS_czm-W1PiODFtcatlZhbuAXdeszb8XAIp-0Hbx0McMo5qn63_uw0E/h120/item-secondary-container-bg.jpg);

background-repeat: repeat-x;

background-color: #FF9900;

border-bottom: 1px solid #CA6500;

}



/*^'^ Secondary Items ^'^*/

#nav-container div a, #nav-container ul a{

padding:3px 10px 3px 6px;

background-color: #FFFFFF;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggjv0Ao8NrsRgng2HpFMO2Y5et2dHWPx-v9l7U7xjkOhNgdregKN7T5zHWmLYl2C_FSCgxdAX1T9GroJsvHcYKxY-0cJ9E7ZL-gQWzU-CKXWAb86OPSNDANNzDW1mjTVcsRgrIkeMOSDo/h120/item-secondary-bg.jpg);

background-repeat: no-repeat;

background-position: 0px 22px;

font-size:11px;

border-width:0px;

border-style:none;

margin: 0px 0px 0px 0px;

width: 149px;

}



/*^'^ Secondary Items Hover State ^'^*/

#nav-container div a:hover, #nav-container ul a:hover{

background-color: #FFFFFF;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjX_cp87CC7uFhbQjDJpOqNkz7GD8SkSZJgM1Wc8nwvwwPKUY2cQTgCeAiwNcr47Q_yZ5w9NFC6WPcSus1BToJKtR5pbPvay_PkoZKks4AH5WkR_3XNW7KaxiesAntzL2Q-ysTaUneTcW5/s1600/item-secondary-bg.jpg);

background-repeat: no-repeat;

color:#CC0000;

}



/*^'^ Secondary Item Titles ^'^*/

#nav-container .item-secondary-title{

cursor:default;

padding:4px 0px 3px 7px;

color: #6C3600;

font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;

font-size:11px;

/* background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAS2hczxg2SG45QDIznQFCuZPFYqjsmvet1wMZ8nssDRYJ42j7j4azk5-VQ97Nxp7yDuxhmbptx9IEQd9gP7ytqnNy2_FB3xW-zSHQqAFXyb5VhXZRdxBWMpNfTjm5H8-EvhAWAQv13YD6/s1600/item-secondary-title-bg.jpg); */

background-repeat: no-repeat;

font-weight:bold;

}



/*^'^ Horizontal Dividers ^'^*/

#nav-container .divider-horiz{

border-top-width:1px;

margin:5px 5px;

border-color: #C16100;

}



/*^'^ Vertical Dividers ^'^*/

#nav-container .divider-vert{

border-left-width:1px;

height:15px;

margin:4px 2px 0px 2px;

border-color:#AAAAAA;

}

Silahkan Simpan



Kedua

Klik + Pilih

Silahkan Copy dan Paste Kode Berikut ini

<div class="nav-container-outer">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhimp7qWwSxQHCseISZDY7t7UHaBFKURZ64k28aMsZAR5vzq-Z9Lwq0XwAScyiy8vVI51bGXj90lGrvWgzAY69dOSB_9UJlYilCaP80wd8pW7bEWm6ZUH28m9Zpxbki6_5GHhRZoqseX_4/h120/nav-bg-l.jpg" alt="" class="float-left" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSzdPUfl_6huiTNkpiyBx4hQgLZsRFxkdncU6KrKtq3RZoxiLoykU-CLg8EHq9jSObkav-d2X-2rgjtUL85GxHqQttKP2b4xZ7rEyM9APE0mg0T8bE8nw5rdU5Tv5KTrSkBtCze4_2zO8/h120/nav-bg-r.jpg" alt="" class="float-right" />

<ul id="nav-container" class="nav-container">

<li><a class="item-primary" href="#">HOME</a>

</li>



<li><span class="divider divider-vert" ></span></li>

<li><a class="item-primary" href="#">Products</a>



<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>



<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>



<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>



<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>



<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">&nbsp;</li></ul>

</div>

Silahkan Sobat Ganti kode berikut dengan menu sesuai keinginan sobat, dan bisa juga ditambahkan atau dikurangi sesuai kebutuhan



<a href="#">Home</a>

<li><a href="#">Product</a>

dst



Kode # = Alamat Link dan Link One = Nama Link

contoh

Kode # saya ganti dengan http://www.kumpulancara.com

Link One saya berikan nama = Home



Terakhir Jangan lupa letakkan atau Geret Gatget Tepat dibawah Header

Selamat mencoba dan semoga bermanfaat

Demikianlah Artikel Cara buat Drop Down menu Sunrise Gloss

Sekian Cara buat Drop Down menu Sunrise Gloss, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.

Anda sedang membaca artikel Cara buat Drop Down menu Sunrise Gloss dan artikel ini url permalinknya adalah https://caratutorialgratis.blogspot.com/2012/02/cara-buat-drop-down-menu-sunrise-gloss.html Semoga artikel ini bisa bermanfaat.

Tweet