login ke blogger pilih layout -> template designer -> advanced -> addCSS
ketik kodenya
#navigation,#nav li ul li,#nav li ul li a{background: #000;} #nav li a,#nav li ul li,#nav li ul li a {color: #fff;} #nav li a:hover,#nav li ul li a:hover {background: #FFDEAD;color: #111;} #nav li a,#nav li a:hover,#nav li ul li a:hover {text-shadow: 0 1px 1px #333;} #menu_div{clear: both;position: relative;top: 0;left: 0;} #navigation {position: fixed;} #navigation, #menu_div {width: 100%;margin: 0 !important;padding: 0 !important;} #menu_div, #navigation, #menu, #nav{height: 45px;} #menu_div:hover,#navigation:hover,#nav li a:hover, #nav li ul a {opacity: 0.95;} #menu_div,#navigation,#nav li a,#menu_div:not(:hover), #navigation:not(:hover){opacity: 0.8;} #menu {width: 960px;margin:0 auto;padding:0;position: relative;} #nav{width: 960px;margin:0;padding:0;position: relative; font-family: 'Arial', Helvetica, sans-serif;} #nav li a,#nav li {float:left;} #nav li {list-style:none;position:relative;} #nav li a {line-height: 45px;padding:0 15px;text-decoration:none;margin:0; font-size:12px; font-weight:700;text-transform:uppercase;} #nav li ul {display:none;position:absolute;left:0;top:100%;padding:0;margin:0;} #nav li:hover > ul {display:block;} #nav li ul li,#nav li ul li a {float:none;height: 35px;min-width: 150px; line-height: 35px;border-right: 0;text-shadow: none; display:block;font-size:13px;font-weight:400;text-transform:inherit;} #nav li ul li {_display:inline;} #nav li ul li ul {display:none;} #nav li ul li:hover ul {left:100%;top:0;} #nav li a:hover,#nav li ul li a:hover {-webkit-transition-property:color, background;-webkit-transition-duration: 0.5s, 0.5s; -webkit-transition-timing-function: linear, ease-out;} #menu_div:hover,#navigation:hover,#nav li ul a,#menu_div,#navigation, #nav li a,#menu_div:not(:hover), #navigation:not(:hover){ -webkit-transition-property:opacity; -webkit-transition-duration: 0.5s, 0.5s; -webkit-transition-timing-function: linear, ease-out; } #container {width:960px;margin-left: auto;margin-right: auto;padding: 0;}
kemudian masuk Edit HTML ketik kodenya sebagai berikut
<div id="menu_div">
<div id="navigation">
<div id="menu">
<ul id="nav">
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
</div>
</div>
</div>
semoga sukses
Apabila berhasil akan tertampil
0 komentar:
Posting Komentar