Print this pageUntuk Membuat Menu Highlight seperti di atas kodenya adalah :
<html>
<head>
<style type="text/css">
#menuContainer {padding:0; margin:50px 0 0 0; list-style:none; width:672px; height:96px; position:relative; float:right;}
#menu {padding:0; margin:0; list-style:none; width:672px; height:96px; float:right;}
#menu li {float:left; width:96px; height:96px; position:relative;}
#menu li a {display:block; float:left; width:96px; height:96px; cursor:pointer;}
#menu li a b {display:block; width:96px; height:0; padding-top:96px; overflow:hidden; position:absolute; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX9ulumnWX9f9lsSuLuZ_u4P3QiN0wTq7-DMMmQAQZ1bQMA5QM95c-o-tcyL9UyID2Mm2G0cwRIUxt93bl3k5HwLcbgaJ6B56Yw3FXggH4WLzcFVXYzDSm2YvSYgiKyNS5vq4aI5UlgzQC/s96-no/highlight.png); left:-9999px;}
* html #menu li a b {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX9ulumnWX9f9lsSuLuZ_u4P3QiN0wTq7-DMMmQAQZ1bQMA5QM95c-o-tcyL9UyID2Mm2G0cwRIUxt93bl3k5HwLcbgaJ6B56Yw3FXggH4WLzcFVXYzDSm2YvSYgiKyNS5vq4aI5UlgzQC/s96-no/highlight.png', sizingMethod='scale');
}
#menu li#home a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkp_1isqQmUB8ejwLFuAKNIcFv1yPz6HgVJnuIKs3OsTcc6_ab0DSU2UCch698V3uC3I_Ael0RSegK85m_jhtGfiF_OcBVyAHf60FT7-1o7FPAyslnd2iydBulyRfwxUISK-4s9ZSQGk0y/s96-no/home.png);}
#menu li#single a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuZlQ5Rb4rCWvvRlwiPd3CoVC5vBNyZtWUCy0YvaFjThOkAgXj84jVkMsmMpJK-rQZLG7AYsZMv0JtdrGel5xZ57jApg3JQtDpDmPE-uy6kDeAiS2nInnDMk6axJ3acTMDVqw2c1JkKQOI/s96-no/single.png);}
#menu li#dropdown a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRVahfPOig3BVHgpPJU5QwfP3BVDq3XWRrYICshJROKJVTzHepiIygkuMkrXR02M3A-DpEh6eeBuj2g9EKcQm5wa0kczO032gLuI9WBps34dd8mNLBu-zSyGVRzLhy0c4w2VGvaMdMhVej/s96-no/dropdown.png);}
#menu li#dropline a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMXJ1Kh7A5GXJN2OlPmaGuw5qImfSl7SmRBLowQoLkhveSlx4k7g-HyQVVPEWvUijSWXir1aGXp_HWqiEZHIY_QVCR4JvvcDoP5pI7Q80wh4jhUU96HMaIcEp6kebZ6kjvFU2DZ1Vpknsc/s96-no/dropline.png);}
#menu li#flyout a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK0rltbQf3Q0Fd7ogZ_YRhoHGqABpJGZY2S69IqblvGEOPcVav59I_TZovK1fpP5cdtLGAi2kJqURC8R29YitW71klFw6bTJ4ITDrhO2rVvQPRpvun-EjZxyrCcyzbLLhXgenlroovtq9R/s96-no/flyout.png);}
#menu li#support a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7jUEvecFt0nh8rume1znKq9nRiulVoXq7Hp0OtXLvilKDSXE8IbSWuaDnWxbAQm3a8ayxZJlNVPOi__Y8kfQPoLH1K-B7KqaetNu9Gyre_Qwc5kzRosWMgkUouGktoCgFEsEk51PjBiQZ/s96-no/support.png);}
#menu li#contact a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipNqHMlv843lxTiispRRasdU3yANYSW1hZsguCPl6NveuUQfQLoTmN1zeN7hUQIn1KxmAyMi8AZMUVxZnSvD4ABeGwSG9bfqUCZT3qJpMk6p5T2YhesvhmXFDk8mtAnSmW2YIdDV42dAq3/s96-no/contact.png);}
* html #menu li#home a {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkp_1isqQmUB8ejwLFuAKNIcFv1yPz6HgVJnuIKs3OsTcc6_ab0DSU2UCch698V3uC3I_Ael0RSegK85m_jhtGfiF_OcBVyAHf60FT7-1o7FPAyslnd2iydBulyRfwxUISK-4s9ZSQGk0y/s96-no/home.png', sizingMethod='scale');
}
* html #menu li#single a {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuZlQ5Rb4rCWvvRlwiPd3CoVC5vBNyZtWUCy0YvaFjThOkAgXj84jVkMsmMpJK-rQZLG7AYsZMv0JtdrGel5xZ57jApg3JQtDpDmPE-uy6kDeAiS2nInnDMk6axJ3acTMDVqw2c1JkKQOI/s96-no/single.png', sizingMethod='scale');
}
* html #menu li#dropdown a {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRVahfPOig3BVHgpPJU5QwfP3BVDq3XWRrYICshJROKJVTzHepiIygkuMkrXR02M3A-DpEh6eeBuj2g9EKcQm5wa0kczO032gLuI9WBps34dd8mNLBu-zSyGVRzLhy0c4w2VGvaMdMhVej/s96-no/dropdown.png', sizingMethod='scale');
}
* html #menu li#dropline a {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMXJ1Kh7A5GXJN2OlPmaGuw5qImfSl7SmRBLowQoLkhveSlx4k7g-HyQVVPEWvUijSWXir1aGXp_HWqiEZHIY_QVCR4JvvcDoP5pI7Q80wh4jhUU96HMaIcEp6kebZ6kjvFU2DZ1Vpknsc/s96-no/dropline.png', sizingMethod='scale');
}
* html #menu li#flyout a {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK0rltbQf3Q0Fd7ogZ_YRhoHGqABpJGZY2S69IqblvGEOPcVav59I_TZovK1fpP5cdtLGAi2kJqURC8R29YitW71klFw6bTJ4ITDrhO2rVvQPRpvun-EjZxyrCcyzbLLhXgenlroovtq9R/s96-no/flyout.png', sizingMethod='scale');
}
* html #menu li#support a {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7jUEvecFt0nh8rume1znKq9nRiulVoXq7Hp0OtXLvilKDSXE8IbSWuaDnWxbAQm3a8ayxZJlNVPOi__Y8kfQPoLH1K-B7KqaetNu9Gyre_Qwc5kzRosWMgkUouGktoCgFEsEk51PjBiQZ/s96-no/support.png', sizingMethod='scale');
}
* html #menu li#contact a {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipNqHMlv843lxTiispRRasdU3yANYSW1hZsguCPl6NveuUQfQLoTmN1zeN7hUQIn1KxmAyMi8AZMUVxZnSvD4ABeGwSG9bfqUCZT3qJpMk6p5T2YhesvhmXFDk8mtAnSmW2YIdDV42dAq3/s96-no/contact.png', sizingMethod='scale');
}
#menu li a:hover {white-space:nowrap; position:relative;}
#menu li a:hover b {left:0; top:0;}
.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 {left:0; top:0;}
</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">
#menuContainer {padding:0; margin:50px 0 0 0; list-style:none; width:672px; height:96px; position:relative; float:right;}
#menu {padding:0; margin:0; list-style:none; width:672px; height:96px; float:right;}
#menu li {float:left; width:96px; height:96px; position:relative;}
#menu li a {display:block; float:left; width:96px; height:96px; cursor:pointer;}
#menu li a b {display:block; width:96px; height:0; padding-top:96px; overflow:hidden; position:absolute; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX9ulumnWX9f9lsSuLuZ_u4P3QiN0wTq7-DMMmQAQZ1bQMA5QM95c-o-tcyL9UyID2Mm2G0cwRIUxt93bl3k5HwLcbgaJ6B56Yw3FXggH4WLzcFVXYzDSm2YvSYgiKyNS5vq4aI5UlgzQC/s96-no/highlight.png); left:-9999px;}
* html #menu li a b {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX9ulumnWX9f9lsSuLuZ_u4P3QiN0wTq7-DMMmQAQZ1bQMA5QM95c-o-tcyL9UyID2Mm2G0cwRIUxt93bl3k5HwLcbgaJ6B56Yw3FXggH4WLzcFVXYzDSm2YvSYgiKyNS5vq4aI5UlgzQC/s96-no/highlight.png', sizingMethod='scale');
}
#menu li#home a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkp_1isqQmUB8ejwLFuAKNIcFv1yPz6HgVJnuIKs3OsTcc6_ab0DSU2UCch698V3uC3I_Ael0RSegK85m_jhtGfiF_OcBVyAHf60FT7-1o7FPAyslnd2iydBulyRfwxUISK-4s9ZSQGk0y/s96-no/home.png);}
#menu li#single a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuZlQ5Rb4rCWvvRlwiPd3CoVC5vBNyZtWUCy0YvaFjThOkAgXj84jVkMsmMpJK-rQZLG7AYsZMv0JtdrGel5xZ57jApg3JQtDpDmPE-uy6kDeAiS2nInnDMk6axJ3acTMDVqw2c1JkKQOI/s96-no/single.png);}
#menu li#dropdown a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRVahfPOig3BVHgpPJU5QwfP3BVDq3XWRrYICshJROKJVTzHepiIygkuMkrXR02M3A-DpEh6eeBuj2g9EKcQm5wa0kczO032gLuI9WBps34dd8mNLBu-zSyGVRzLhy0c4w2VGvaMdMhVej/s96-no/dropdown.png);}
#menu li#dropline a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMXJ1Kh7A5GXJN2OlPmaGuw5qImfSl7SmRBLowQoLkhveSlx4k7g-HyQVVPEWvUijSWXir1aGXp_HWqiEZHIY_QVCR4JvvcDoP5pI7Q80wh4jhUU96HMaIcEp6kebZ6kjvFU2DZ1Vpknsc/s96-no/dropline.png);}
#menu li#flyout a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK0rltbQf3Q0Fd7ogZ_YRhoHGqABpJGZY2S69IqblvGEOPcVav59I_TZovK1fpP5cdtLGAi2kJqURC8R29YitW71klFw6bTJ4ITDrhO2rVvQPRpvun-EjZxyrCcyzbLLhXgenlroovtq9R/s96-no/flyout.png);}
#menu li#support a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7jUEvecFt0nh8rume1znKq9nRiulVoXq7Hp0OtXLvilKDSXE8IbSWuaDnWxbAQm3a8ayxZJlNVPOi__Y8kfQPoLH1K-B7KqaetNu9Gyre_Qwc5kzRosWMgkUouGktoCgFEsEk51PjBiQZ/s96-no/support.png);}
#menu li#contact a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipNqHMlv843lxTiispRRasdU3yANYSW1hZsguCPl6NveuUQfQLoTmN1zeN7hUQIn1KxmAyMi8AZMUVxZnSvD4ABeGwSG9bfqUCZT3qJpMk6p5T2YhesvhmXFDk8mtAnSmW2YIdDV42dAq3/s96-no/contact.png);}
* html #menu li#home a {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkp_1isqQmUB8ejwLFuAKNIcFv1yPz6HgVJnuIKs3OsTcc6_ab0DSU2UCch698V3uC3I_Ael0RSegK85m_jhtGfiF_OcBVyAHf60FT7-1o7FPAyslnd2iydBulyRfwxUISK-4s9ZSQGk0y/s96-no/home.png', sizingMethod='scale');
}
* html #menu li#single a {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuZlQ5Rb4rCWvvRlwiPd3CoVC5vBNyZtWUCy0YvaFjThOkAgXj84jVkMsmMpJK-rQZLG7AYsZMv0JtdrGel5xZ57jApg3JQtDpDmPE-uy6kDeAiS2nInnDMk6axJ3acTMDVqw2c1JkKQOI/s96-no/single.png', sizingMethod='scale');
}
* html #menu li#dropdown a {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRVahfPOig3BVHgpPJU5QwfP3BVDq3XWRrYICshJROKJVTzHepiIygkuMkrXR02M3A-DpEh6eeBuj2g9EKcQm5wa0kczO032gLuI9WBps34dd8mNLBu-zSyGVRzLhy0c4w2VGvaMdMhVej/s96-no/dropdown.png', sizingMethod='scale');
}
* html #menu li#dropline a {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMXJ1Kh7A5GXJN2OlPmaGuw5qImfSl7SmRBLowQoLkhveSlx4k7g-HyQVVPEWvUijSWXir1aGXp_HWqiEZHIY_QVCR4JvvcDoP5pI7Q80wh4jhUU96HMaIcEp6kebZ6kjvFU2DZ1Vpknsc/s96-no/dropline.png', sizingMethod='scale');
}
* html #menu li#flyout a {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK0rltbQf3Q0Fd7ogZ_YRhoHGqABpJGZY2S69IqblvGEOPcVav59I_TZovK1fpP5cdtLGAi2kJqURC8R29YitW71klFw6bTJ4ITDrhO2rVvQPRpvun-EjZxyrCcyzbLLhXgenlroovtq9R/s96-no/flyout.png', sizingMethod='scale');
}
* html #menu li#support a {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7jUEvecFt0nh8rume1znKq9nRiulVoXq7Hp0OtXLvilKDSXE8IbSWuaDnWxbAQm3a8ayxZJlNVPOi__Y8kfQPoLH1K-B7KqaetNu9Gyre_Qwc5kzRosWMgkUouGktoCgFEsEk51PjBiQZ/s96-no/support.png', sizingMethod='scale');
}
* html #menu li#contact a {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipNqHMlv843lxTiispRRasdU3yANYSW1hZsguCPl6NveuUQfQLoTmN1zeN7hUQIn1KxmAyMi8AZMUVxZnSvD4ABeGwSG9bfqUCZT3qJpMk6p5T2YhesvhmXFDk8mtAnSmW2YIdDV42dAq3/s96-no/contact.png', sizingMethod='scale');
}
#menu li a:hover {white-space:nowrap; position:relative;}
#menu li a:hover b {left:0; top:0;}
.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 {left:0; top:0;}
</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