Print this pageUntuk membuat menu seperti contoh di atas, kodenya sebagai berikut :
<html>
<head>
<style type="text/css">
#menu li {float:left;}
#menu li a {display:block; height:50px; line-height:25px; padding:0 20px 0 0; float:left; color:#ddd; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7AaDk3J4qIGZGddNDU82F0vurAlHaWZwqkN-kcCrpQTZnWsFTNJo__I7PeZnS4JaEmTOZYwjENnmCArs4aakPRxnD7s7jm7kOFL07wNctl6JwsXH9ULNg7NWvJrxZtB3YK0IyPK0VPjvF/w30-h50-no/tab_a.gif) no-repeat right -25px; text-decoration:none;}
#menu li a b {display:block; height:50px; float:left; padding:0 0 0 20px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL6l9wLOqD9SmkoefbXpUTQrbMRvIiNpCqx2GcLMfyXlNsdO3jkxQ-iXyM1qF-43v0QnvGV0dhCZG1Z0Tl2LfCLVVws8i8AlHx8b-Te0vu1U-nt3LdkjSY3LJfu6chX8HBPpYH8jp4SbDl/w301-h50-no/tab_b.gif) no-repeat left -25px; cursor:pointer;}
#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/AVvXsEj7AaDk3J4qIGZGddNDU82F0vurAlHaWZwqkN-kcCrpQTZnWsFTNJo__I7PeZnS4JaEmTOZYwjENnmCArs4aakPRxnD7s7jm7kOFL07wNctl6JwsXH9ULNg7NWvJrxZtB3YK0IyPK0VPjvF/w30-h50-no/tab_a.gif) no-repeat right -10px; line-height:50px; color:#fff;}
#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
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL6l9wLOqD9SmkoefbXpUTQrbMRvIiNpCqx2GcLMfyXlNsdO3jkxQ-iXyM1qF-43v0QnvGV0dhCZG1Z0Tl2LfCLVVws8i8AlHx8b-Te0vu1U-nt3LdkjSY3LJfu6chX8HBPpYH8jp4SbDl/w301-h50-no/tab_b.gif) no-repeat left -10px; line-height:50px;}
#ul, li {list-style-type:none;}
</style>
</head>
<ul id="menu">
<li id="home"><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>
</html>
<head>
<style type="text/css">
#menu li {float:left;}
#menu li a {display:block; height:50px; line-height:25px; padding:0 20px 0 0; float:left; color:#ddd; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7AaDk3J4qIGZGddNDU82F0vurAlHaWZwqkN-kcCrpQTZnWsFTNJo__I7PeZnS4JaEmTOZYwjENnmCArs4aakPRxnD7s7jm7kOFL07wNctl6JwsXH9ULNg7NWvJrxZtB3YK0IyPK0VPjvF/w30-h50-no/tab_a.gif) no-repeat right -25px; text-decoration:none;}
#menu li a b {display:block; height:50px; float:left; padding:0 0 0 20px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL6l9wLOqD9SmkoefbXpUTQrbMRvIiNpCqx2GcLMfyXlNsdO3jkxQ-iXyM1qF-43v0QnvGV0dhCZG1Z0Tl2LfCLVVws8i8AlHx8b-Te0vu1U-nt3LdkjSY3LJfu6chX8HBPpYH8jp4SbDl/w301-h50-no/tab_b.gif) no-repeat left -25px; cursor:pointer;}
#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/AVvXsEj7AaDk3J4qIGZGddNDU82F0vurAlHaWZwqkN-kcCrpQTZnWsFTNJo__I7PeZnS4JaEmTOZYwjENnmCArs4aakPRxnD7s7jm7kOFL07wNctl6JwsXH9ULNg7NWvJrxZtB3YK0IyPK0VPjvF/w30-h50-no/tab_a.gif) no-repeat right -10px; line-height:50px; color:#fff;}
#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
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL6l9wLOqD9SmkoefbXpUTQrbMRvIiNpCqx2GcLMfyXlNsdO3jkxQ-iXyM1qF-43v0QnvGV0dhCZG1Z0Tl2LfCLVVws8i8AlHx8b-Te0vu1U-nt3LdkjSY3LJfu6chX8HBPpYH8jp4SbDl/w301-h50-no/tab_b.gif) no-repeat left -10px; line-height:50px;}
#ul, li {list-style-type:none;}
</style>
</head>
<ul id="menu">
<li id="home"><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>
</html>
0 komentar:
Posting Komentar