Silahkan Kunjungi rumah blog kami yang baru klik DISINI
untuk fotonya silahkan anda koment sendiri....ha...ha....

Rabu, 07 Januari 2015

Membuat Menu Riser

print this page Print this page



Kode yang digunakan adalah :
  <html>
  <head>
  <style type="text/css">
#menu {padding:0; margin:0; list-style:none; width:100%; height:400px; position:absolute; top:5px; left:0px;}
#menu li {position:relative; float:left;}
#menu li a {display:block; height:45px; width:100px; padding:0; float:left; color:#fff; text-decoration:none; font-family:"trebuchet MS", sans-serif; font-size:14px; text-align:center; cursor:pointer; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY8JCp8LGepkx1jfUaO0cnUQrWn5vXr71BB-F3TYg6G5WaE9E1x9KB5SfqjuG5RqEUhUk8TJhowlpJ8xYPBomAePnhPACN8CewEuwsJY6cx2g71lE2MKBO8YsjXz0VxyWed8deboX8HtgH/w100-h45-no/button-off.png);}
#menu li a b {position:relative; top:12px; font-weight:normal;}
* html #menu li a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY8JCp8LGepkx1jfUaO0cnUQrWn5vXr71BB-F3TYg6G5WaE9E1x9KB5SfqjuG5RqEUhUk8TJhowlpJ8xYPBomAePnhPACN8CewEuwsJY6cx2g71lE2MKBO8YsjXz0VxyWed8deboX8HtgH/w100-h45-no/button-off.png', sizingMethod='scale');}


#menu li a:hover,
#menu li a:active,
#menu li a:focus,
.home #menu li#home a,
.single #menu li#single a,
.dropdown #menu li#dropdown a,
.dropline #menu li#dropline a,
.flyout #menu li#flyout a,
.support #menu li#support a,
.contact #menu li#contact a
{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3ELMblxWxKv4dBwAJgZDKY3oZ9bdGR8PuwWAF6JvXK0xwWX-xoDEG2wmoN9NwNEotZDWxZXl0R3muRtQLnDtIiAvn9BEal9jxlAyCW8PM9Qmv_2rcj-o0Ri-kzEfJ61lR6OQ-u48BfrOp/w100-h45-no/button-on.png) no-repeat right top; cursor:pointer; color:#fff;}

* html #menu li a:hover,
* html #menu li a:active,
* html #menu li a:focus,
* html .home #menu li#home a,
* html .single #menu li#single a,
* html .dropdown #menu li#dropdown a,
* html .dropline #menu li#dropline a,
* html .flyout #menu li#flyout a,
* html .support #menu li#support a,
* html .contact #menu li#contact a
{background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3ELMblxWxKv4dBwAJgZDKY3oZ9bdGR8PuwWAF6JvXK0xwWX-xoDEG2wmoN9NwNEotZDWxZXl0R3muRtQLnDtIiAvn9BEal9jxlAyCW8PM9Qmv_2rcj-o0Ri-kzEfJ61lR6OQ-u48BfrOp/w100-h45-no/button-on.png', sizingMethod='scale');}

#menu li a:hover b,
#menu li a:active b,
#menu li a:focus b,
.home #menu li#home a b,
.single #menu li#single a b,
.dropdown #menu li#dropdown a b,
.dropline #menu li#dropline a b,
.flyout #menu li#flyout a b,
.support #menu li#support a b,
.contact #menu li#contact a b
{cursor:pointer; top:8px; padding-right:3px;}

  </style>
  </head>
  <body>
  <ul id="menu">
   <li id="home" class="first"><a href="index.html"><b>Home</b></a></li>
   <li id="single"><a href="single.html"><b>Single Level</b></a></li>
   <li id="dropdown"><a href="dropdown.html"><b>Dropdown</b></a></li>
   <li id="dropline"><a href="dropline.html"><b>Dropline</b></a></li>
   <li id="flyout"><a href="flyout.html"><b>Flyout</b></a></li>
   <li id="support"><a href="support.html"><b>Support</b></a></li>
  </ul>
  </body>
  </html>
Artikel Terkait

A M A R A J E N

0   komentar

Posting Komentar

Cancel Reply
A M A R A J E N
Blog ini didirikan hanya untuk kalangan sendiri, Terima kasih telah singgah.. Semoga kita berjumpa kembali.....!