Print this pageUntuk membuat menu balon seperti di atas, kodenya seperti berikut :
<html>
<head>
<style type="text/css">
#menu {padding:0; margin:0; list-style:none; width:546px; height:180px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDOsAIzCYc8f1KM6dXBEUJYRtOrkd75_-tojHrtw91STuq_4uQr_i-JBmGxKVBC5VWjVtGfKOjyo0irrc_aWY-DyXRKk1pcxHz8YzKZBso36tIsCHGcD8CFrj66oThntZTk1gr3ZgL0GxS/w546-h180-no/bw.jpg); position:relative; float:right;}
#menu li {float:left;}
#menu li a {display:block; width:78px; height:100px; background:transparent;}
#menu li a b {position:absolute; left:-9999px;}
#menu li#home,
#menu li#dropdown,
#menu li#flyout,
#menu li#contact
{margin-top:23px;}
#menu li#single,
#menu li#dropline,
#menu li#support
{margin-top:3px;}
#menu li#home a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI9CtmgSDyQ5E03mZUGQ9kAKyrUaHM38kKyUjG7FwgtvB5e9-0phxS-wioQws00Frgoi-qe-sOtdMDmNWeGay6ke9Yd1sKoVgef1EKjoMQcxUJ6kO3619_-S-wAkwGeA7I_Br3OzIkv_KQ/w546-h180-no/color.jpg) 0 -23px;}
#menu li#single a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI9CtmgSDyQ5E03mZUGQ9kAKyrUaHM38kKyUjG7FwgtvB5e9-0phxS-wioQws00Frgoi-qe-sOtdMDmNWeGay6ke9Yd1sKoVgef1EKjoMQcxUJ6kO3619_-S-wAkwGeA7I_Br3OzIkv_KQ/w546-h180-no/color.jpg) -78px -3px;}
#menu li#dropdown a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI9CtmgSDyQ5E03mZUGQ9kAKyrUaHM38kKyUjG7FwgtvB5e9-0phxS-wioQws00Frgoi-qe-sOtdMDmNWeGay6ke9Yd1sKoVgef1EKjoMQcxUJ6kO3619_-S-wAkwGeA7I_Br3OzIkv_KQ/w546-h180-no/color.jpg) -156px -23px;}
#menu li#dropline a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI9CtmgSDyQ5E03mZUGQ9kAKyrUaHM38kKyUjG7FwgtvB5e9-0phxS-wioQws00Frgoi-qe-sOtdMDmNWeGay6ke9Yd1sKoVgef1EKjoMQcxUJ6kO3619_-S-wAkwGeA7I_Br3OzIkv_KQ/w546-h180-no/color.jpg) -234px -3px;}
#menu li#flyout a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI9CtmgSDyQ5E03mZUGQ9kAKyrUaHM38kKyUjG7FwgtvB5e9-0phxS-wioQws00Frgoi-qe-sOtdMDmNWeGay6ke9Yd1sKoVgef1EKjoMQcxUJ6kO3619_-S-wAkwGeA7I_Br3OzIkv_KQ/w546-h180-no/color.jpg) -312px -23px;}
#menu li#support a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI9CtmgSDyQ5E03mZUGQ9kAKyrUaHM38kKyUjG7FwgtvB5e9-0phxS-wioQws00Frgoi-qe-sOtdMDmNWeGay6ke9Yd1sKoVgef1EKjoMQcxUJ6kO3619_-S-wAkwGeA7I_Br3OzIkv_KQ/w546-h180-no/color.jpg) -390px -3px;}
#menu li#contact a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI9CtmgSDyQ5E03mZUGQ9kAKyrUaHM38kKyUjG7FwgtvB5e9-0phxS-wioQws00Frgoi-qe-sOtdMDmNWeGay6ke9Yd1sKoVgef1EKjoMQcxUJ6kO3619_-S-wAkwGeA7I_Br3OzIkv_KQ/w546-h180-no/color.jpg) -468px -23px;}
.home #menu li#home a, .home #menu li#home a:hover, #menu li#home a:active, #menu li#home a:focus {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-74Z53jCs8tJkdvORCglF5ZdS7BnxvcCaZ1JcDgjVsqxlBX-4mjYnkXM8_irMDL8ftGczqmpTxoQlVWrxxaxiK1ZDT-7eNnswMSeA4Jm0qi0dxwotZiYm7hH4lNOpMyzR6lFfVWS7Avp/w546-h180-no/white.jpg) 0 -23px;}
.single #menu li#single a, .single #menu li#single a:hover, #menu li#single a:active, #menu li#single a:focus {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-74Z53jCs8tJkdvORCglF5ZdS7BnxvcCaZ1JcDgjVsqxlBX-4mjYnkXM8_irMDL8ftGczqmpTxoQlVWrxxaxiK1ZDT-7eNnswMSeA4Jm0qi0dxwotZiYm7hH4lNOpMyzR6lFfVWS7Avp/w546-h180-no/white.jpg) -78px -3px;}
.dropdown #menu li#dropdown a, .dropdown #menu li#dropdown a:hover, #menu li#dropdown a:active, #menu li#dropdown a:focus {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-74Z53jCs8tJkdvORCglF5ZdS7BnxvcCaZ1JcDgjVsqxlBX-4mjYnkXM8_irMDL8ftGczqmpTxoQlVWrxxaxiK1ZDT-7eNnswMSeA4Jm0qi0dxwotZiYm7hH4lNOpMyzR6lFfVWS7Avp/w546-h180-no/white.jpg) -156px -23px;}
.dropline #menu li#dropline a, .dropline #menu li#dropline a:hover, #menu li#dropline a:active, #menu li#dropline a:focus {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-74Z53jCs8tJkdvORCglF5ZdS7BnxvcCaZ1JcDgjVsqxlBX-4mjYnkXM8_irMDL8ftGczqmpTxoQlVWrxxaxiK1ZDT-7eNnswMSeA4Jm0qi0dxwotZiYm7hH4lNOpMyzR6lFfVWS7Avp/w546-h180-no/white.jpg) -234px -3px;}
.flyout #menu li#flyout a, .flyout #menu li#flyout a:hover, #menu li#flyout a:active, #menu li#flyout a:focus {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-74Z53jCs8tJkdvORCglF5ZdS7BnxvcCaZ1JcDgjVsqxlBX-4mjYnkXM8_irMDL8ftGczqmpTxoQlVWrxxaxiK1ZDT-7eNnswMSeA4Jm0qi0dxwotZiYm7hH4lNOpMyzR6lFfVWS7Avp/w546-h180-no/white.jpg) -312px -23px;}
.support #menu li#support a, .support #menu li#support a:hover, #menu li#support a:active, #menu li#support a:focus {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-74Z53jCs8tJkdvORCglF5ZdS7BnxvcCaZ1JcDgjVsqxlBX-4mjYnkXM8_irMDL8ftGczqmpTxoQlVWrxxaxiK1ZDT-7eNnswMSeA4Jm0qi0dxwotZiYm7hH4lNOpMyzR6lFfVWS7Avp/w546-h180-no/white.jpg) -390px -3px;}
.contact #menu li#contact a, .contact #menu li#contact a:hover, #menu li#contact a:active, #menu li#contact a:focus {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-74Z53jCs8tJkdvORCglF5ZdS7BnxvcCaZ1JcDgjVsqxlBX-4mjYnkXM8_irMDL8ftGczqmpTxoQlVWrxxaxiK1ZDT-7eNnswMSeA4Jm0qi0dxwotZiYm7hH4lNOpMyzR6lFfVWS7Avp/w546-h180-no/white.jpg) -468px -23px;}
</style>
</head>
<body>
<div id="menuContainer">
<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>
<li id="contact" class="last"><a href="contact.html"><b>Contact</b></a></li>
</ul>
</div>
</body>
</html>
<head>
<style type="text/css">
#menu {padding:0; margin:0; list-style:none; width:546px; height:180px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDOsAIzCYc8f1KM6dXBEUJYRtOrkd75_-tojHrtw91STuq_4uQr_i-JBmGxKVBC5VWjVtGfKOjyo0irrc_aWY-DyXRKk1pcxHz8YzKZBso36tIsCHGcD8CFrj66oThntZTk1gr3ZgL0GxS/w546-h180-no/bw.jpg); position:relative; float:right;}
#menu li {float:left;}
#menu li a {display:block; width:78px; height:100px; background:transparent;}
#menu li a b {position:absolute; left:-9999px;}
#menu li#home,
#menu li#dropdown,
#menu li#flyout,
#menu li#contact
{margin-top:23px;}
#menu li#single,
#menu li#dropline,
#menu li#support
{margin-top:3px;}
#menu li#home a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI9CtmgSDyQ5E03mZUGQ9kAKyrUaHM38kKyUjG7FwgtvB5e9-0phxS-wioQws00Frgoi-qe-sOtdMDmNWeGay6ke9Yd1sKoVgef1EKjoMQcxUJ6kO3619_-S-wAkwGeA7I_Br3OzIkv_KQ/w546-h180-no/color.jpg) 0 -23px;}
#menu li#single a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI9CtmgSDyQ5E03mZUGQ9kAKyrUaHM38kKyUjG7FwgtvB5e9-0phxS-wioQws00Frgoi-qe-sOtdMDmNWeGay6ke9Yd1sKoVgef1EKjoMQcxUJ6kO3619_-S-wAkwGeA7I_Br3OzIkv_KQ/w546-h180-no/color.jpg) -78px -3px;}
#menu li#dropdown a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI9CtmgSDyQ5E03mZUGQ9kAKyrUaHM38kKyUjG7FwgtvB5e9-0phxS-wioQws00Frgoi-qe-sOtdMDmNWeGay6ke9Yd1sKoVgef1EKjoMQcxUJ6kO3619_-S-wAkwGeA7I_Br3OzIkv_KQ/w546-h180-no/color.jpg) -156px -23px;}
#menu li#dropline a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI9CtmgSDyQ5E03mZUGQ9kAKyrUaHM38kKyUjG7FwgtvB5e9-0phxS-wioQws00Frgoi-qe-sOtdMDmNWeGay6ke9Yd1sKoVgef1EKjoMQcxUJ6kO3619_-S-wAkwGeA7I_Br3OzIkv_KQ/w546-h180-no/color.jpg) -234px -3px;}
#menu li#flyout a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI9CtmgSDyQ5E03mZUGQ9kAKyrUaHM38kKyUjG7FwgtvB5e9-0phxS-wioQws00Frgoi-qe-sOtdMDmNWeGay6ke9Yd1sKoVgef1EKjoMQcxUJ6kO3619_-S-wAkwGeA7I_Br3OzIkv_KQ/w546-h180-no/color.jpg) -312px -23px;}
#menu li#support a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI9CtmgSDyQ5E03mZUGQ9kAKyrUaHM38kKyUjG7FwgtvB5e9-0phxS-wioQws00Frgoi-qe-sOtdMDmNWeGay6ke9Yd1sKoVgef1EKjoMQcxUJ6kO3619_-S-wAkwGeA7I_Br3OzIkv_KQ/w546-h180-no/color.jpg) -390px -3px;}
#menu li#contact a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI9CtmgSDyQ5E03mZUGQ9kAKyrUaHM38kKyUjG7FwgtvB5e9-0phxS-wioQws00Frgoi-qe-sOtdMDmNWeGay6ke9Yd1sKoVgef1EKjoMQcxUJ6kO3619_-S-wAkwGeA7I_Br3OzIkv_KQ/w546-h180-no/color.jpg) -468px -23px;}
.home #menu li#home a, .home #menu li#home a:hover, #menu li#home a:active, #menu li#home a:focus {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-74Z53jCs8tJkdvORCglF5ZdS7BnxvcCaZ1JcDgjVsqxlBX-4mjYnkXM8_irMDL8ftGczqmpTxoQlVWrxxaxiK1ZDT-7eNnswMSeA4Jm0qi0dxwotZiYm7hH4lNOpMyzR6lFfVWS7Avp/w546-h180-no/white.jpg) 0 -23px;}
.single #menu li#single a, .single #menu li#single a:hover, #menu li#single a:active, #menu li#single a:focus {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-74Z53jCs8tJkdvORCglF5ZdS7BnxvcCaZ1JcDgjVsqxlBX-4mjYnkXM8_irMDL8ftGczqmpTxoQlVWrxxaxiK1ZDT-7eNnswMSeA4Jm0qi0dxwotZiYm7hH4lNOpMyzR6lFfVWS7Avp/w546-h180-no/white.jpg) -78px -3px;}
.dropdown #menu li#dropdown a, .dropdown #menu li#dropdown a:hover, #menu li#dropdown a:active, #menu li#dropdown a:focus {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-74Z53jCs8tJkdvORCglF5ZdS7BnxvcCaZ1JcDgjVsqxlBX-4mjYnkXM8_irMDL8ftGczqmpTxoQlVWrxxaxiK1ZDT-7eNnswMSeA4Jm0qi0dxwotZiYm7hH4lNOpMyzR6lFfVWS7Avp/w546-h180-no/white.jpg) -156px -23px;}
.dropline #menu li#dropline a, .dropline #menu li#dropline a:hover, #menu li#dropline a:active, #menu li#dropline a:focus {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-74Z53jCs8tJkdvORCglF5ZdS7BnxvcCaZ1JcDgjVsqxlBX-4mjYnkXM8_irMDL8ftGczqmpTxoQlVWrxxaxiK1ZDT-7eNnswMSeA4Jm0qi0dxwotZiYm7hH4lNOpMyzR6lFfVWS7Avp/w546-h180-no/white.jpg) -234px -3px;}
.flyout #menu li#flyout a, .flyout #menu li#flyout a:hover, #menu li#flyout a:active, #menu li#flyout a:focus {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-74Z53jCs8tJkdvORCglF5ZdS7BnxvcCaZ1JcDgjVsqxlBX-4mjYnkXM8_irMDL8ftGczqmpTxoQlVWrxxaxiK1ZDT-7eNnswMSeA4Jm0qi0dxwotZiYm7hH4lNOpMyzR6lFfVWS7Avp/w546-h180-no/white.jpg) -312px -23px;}
.support #menu li#support a, .support #menu li#support a:hover, #menu li#support a:active, #menu li#support a:focus {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-74Z53jCs8tJkdvORCglF5ZdS7BnxvcCaZ1JcDgjVsqxlBX-4mjYnkXM8_irMDL8ftGczqmpTxoQlVWrxxaxiK1ZDT-7eNnswMSeA4Jm0qi0dxwotZiYm7hH4lNOpMyzR6lFfVWS7Avp/w546-h180-no/white.jpg) -390px -3px;}
.contact #menu li#contact a, .contact #menu li#contact a:hover, #menu li#contact a:active, #menu li#contact a:focus {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-74Z53jCs8tJkdvORCglF5ZdS7BnxvcCaZ1JcDgjVsqxlBX-4mjYnkXM8_irMDL8ftGczqmpTxoQlVWrxxaxiK1ZDT-7eNnswMSeA4Jm0qi0dxwotZiYm7hH4lNOpMyzR6lFfVWS7Avp/w546-h180-no/white.jpg) -468px -23px;}
</style>
</head>
<body>
<div id="menuContainer">
<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>
<li id="contact" class="last"><a href="contact.html"><b>Contact</b></a></li>
</ul>
</div>
</body>
</html>
Artikel Terkait
A M A R A J E N
0 komentar
Posting Komentar