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/AVvXsEiKjysAP_ErwWh01W4cjiKEhyQQGdgzpznSbEuJTavPWUVR45EpQRwrzPQNHBj2wS_EqSLdB36hZxQCVrzWce4BJMhV-A5pxOqOODNtyPtF5wxU2n_Fjb5gfhP68VvZTXeeIAFE8Ctm5x3n/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/AVvXsEiKjysAP_ErwWh01W4cjiKEhyQQGdgzpznSbEuJTavPWUVR45EpQRwrzPQNHBj2wS_EqSLdB36hZxQCVrzWce4BJMhV-A5pxOqOODNtyPtF5wxU2n_Fjb5gfhP68VvZTXeeIAFE8Ctm5x3n/s96-no/highlight.png', sizingMethod='scale');
}
#menu li#home a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXIxuKORgDFZVvrdVak5luBY8_L2ZCJUCvOVcczeAS3Hsjmxz9NLWuKgyO3H0rRPag_3lt-OwsPgM3CY5bmPQMZ4cw9zH8Fw_REI29zMCZPCn9goUOrCDeHb5TBwyfvSOitHyg6jiubWxo/s96-no/home.png);}
#menu li#single a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSpPQij4fhtu0sa1YR-H_kwm_Z1lKisO06-n9oUFiU-ck9aMgitTHDWBjQvYL7citXlqir2BQnWiCcNkxctqMFl80hmu2K6BXWdLKjPSC-Fmnm58q_5yXbXwYG8q-jCiuAbc8i_Eh-0VMB/s96-no/single.png);}
#menu li#dropdown a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixFg-FS-lcms7Q-n8dvyT25jFgyQTqcXdbW1y-bg9uWLYexMCrimOLTobPPSjallXZoU40KPCG1HFXIkyb_lI3agiZmx4CjAOw4-FDdHlfs5VIkul2d_CqOfYc-vICPtILPcDypIeKi9Zy/s96-no/dropdown.png);}
#menu li#dropline a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhapUloyuQc_22XyJhpPMMjM9wrF52LY7rypD_ukOou0jIMVUiXiM863ys32I4umo2Twc4Pyt7INZfStI7cHRTEesF_5vXdKaM7BvTI6b9aZulmXM4SnJRXjMATLPYDN59qfamUkODKh4N0/s96-no/dropline.png);}
#menu li#flyout a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0TchCvCrYfHOlK7YC3NwdkwaT8Ak2MB8ppRuAgchYLTauw7tmU6rNIAsq1_IEboPwHbK-LmGRkEHOWSfoVo0jTyKqoyUVPBrEpSddlp8aj_MaBOA6XCHReQ_FkwiSw8LCNCuQF_dPee4G/s96-no/flyout.png);}
#menu li#support a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIpBVMq-Em14JQIMaTk0RVXWH2f1AuKc8whz-u7ZMwHOL3FytolOGcTPui7-XmAigCEbbPtdet3FO9tncfdSWZ3lT4lVAARZTrYBGcE1oeb4Y39skCX9VOeOGo3AZ4Y-KRB6So8yzJ0EK1/s96-no/support.png);}
#menu li#contact a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyZSuX7G6l82wLcaTHX9H3iWilyXsePq9ZWtojLDNK-UJ80XT6NT_yu4_AtiZ4bCf54X6QMMvwQ6CSOpHG_wZ3sCU74zRE8bfw7B8T7UeFScWF7vt6n5hi41eCgY6hSaFDCTUY8fip8zmw/s96-no/contact.png);}
* html #menu li#home a {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXIxuKORgDFZVvrdVak5luBY8_L2ZCJUCvOVcczeAS3Hsjmxz9NLWuKgyO3H0rRPag_3lt-OwsPgM3CY5bmPQMZ4cw9zH8Fw_REI29zMCZPCn9goUOrCDeHb5TBwyfvSOitHyg6jiubWxo/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/AVvXsEjSpPQij4fhtu0sa1YR-H_kwm_Z1lKisO06-n9oUFiU-ck9aMgitTHDWBjQvYL7citXlqir2BQnWiCcNkxctqMFl80hmu2K6BXWdLKjPSC-Fmnm58q_5yXbXwYG8q-jCiuAbc8i_Eh-0VMB/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/AVvXsEixFg-FS-lcms7Q-n8dvyT25jFgyQTqcXdbW1y-bg9uWLYexMCrimOLTobPPSjallXZoU40KPCG1HFXIkyb_lI3agiZmx4CjAOw4-FDdHlfs5VIkul2d_CqOfYc-vICPtILPcDypIeKi9Zy/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/AVvXsEhapUloyuQc_22XyJhpPMMjM9wrF52LY7rypD_ukOou0jIMVUiXiM863ys32I4umo2Twc4Pyt7INZfStI7cHRTEesF_5vXdKaM7BvTI6b9aZulmXM4SnJRXjMATLPYDN59qfamUkODKh4N0/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/AVvXsEh0TchCvCrYfHOlK7YC3NwdkwaT8Ak2MB8ppRuAgchYLTauw7tmU6rNIAsq1_IEboPwHbK-LmGRkEHOWSfoVo0jTyKqoyUVPBrEpSddlp8aj_MaBOA6XCHReQ_FkwiSw8LCNCuQF_dPee4G/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/AVvXsEhIpBVMq-Em14JQIMaTk0RVXWH2f1AuKc8whz-u7ZMwHOL3FytolOGcTPui7-XmAigCEbbPtdet3FO9tncfdSWZ3lT4lVAARZTrYBGcE1oeb4Y39skCX9VOeOGo3AZ4Y-KRB6So8yzJ0EK1/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/AVvXsEiyZSuX7G6l82wLcaTHX9H3iWilyXsePq9ZWtojLDNK-UJ80XT6NT_yu4_AtiZ4bCf54X6QMMvwQ6CSOpHG_wZ3sCU74zRE8bfw7B8T7UeFScWF7vt6n5hi41eCgY6hSaFDCTUY8fip8zmw/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/AVvXsEiKjysAP_ErwWh01W4cjiKEhyQQGdgzpznSbEuJTavPWUVR45EpQRwrzPQNHBj2wS_EqSLdB36hZxQCVrzWce4BJMhV-A5pxOqOODNtyPtF5wxU2n_Fjb5gfhP68VvZTXeeIAFE8Ctm5x3n/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/AVvXsEiKjysAP_ErwWh01W4cjiKEhyQQGdgzpznSbEuJTavPWUVR45EpQRwrzPQNHBj2wS_EqSLdB36hZxQCVrzWce4BJMhV-A5pxOqOODNtyPtF5wxU2n_Fjb5gfhP68VvZTXeeIAFE8Ctm5x3n/s96-no/highlight.png', sizingMethod='scale');
}
#menu li#home a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXIxuKORgDFZVvrdVak5luBY8_L2ZCJUCvOVcczeAS3Hsjmxz9NLWuKgyO3H0rRPag_3lt-OwsPgM3CY5bmPQMZ4cw9zH8Fw_REI29zMCZPCn9goUOrCDeHb5TBwyfvSOitHyg6jiubWxo/s96-no/home.png);}
#menu li#single a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSpPQij4fhtu0sa1YR-H_kwm_Z1lKisO06-n9oUFiU-ck9aMgitTHDWBjQvYL7citXlqir2BQnWiCcNkxctqMFl80hmu2K6BXWdLKjPSC-Fmnm58q_5yXbXwYG8q-jCiuAbc8i_Eh-0VMB/s96-no/single.png);}
#menu li#dropdown a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixFg-FS-lcms7Q-n8dvyT25jFgyQTqcXdbW1y-bg9uWLYexMCrimOLTobPPSjallXZoU40KPCG1HFXIkyb_lI3agiZmx4CjAOw4-FDdHlfs5VIkul2d_CqOfYc-vICPtILPcDypIeKi9Zy/s96-no/dropdown.png);}
#menu li#dropline a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhapUloyuQc_22XyJhpPMMjM9wrF52LY7rypD_ukOou0jIMVUiXiM863ys32I4umo2Twc4Pyt7INZfStI7cHRTEesF_5vXdKaM7BvTI6b9aZulmXM4SnJRXjMATLPYDN59qfamUkODKh4N0/s96-no/dropline.png);}
#menu li#flyout a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0TchCvCrYfHOlK7YC3NwdkwaT8Ak2MB8ppRuAgchYLTauw7tmU6rNIAsq1_IEboPwHbK-LmGRkEHOWSfoVo0jTyKqoyUVPBrEpSddlp8aj_MaBOA6XCHReQ_FkwiSw8LCNCuQF_dPee4G/s96-no/flyout.png);}
#menu li#support a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIpBVMq-Em14JQIMaTk0RVXWH2f1AuKc8whz-u7ZMwHOL3FytolOGcTPui7-XmAigCEbbPtdet3FO9tncfdSWZ3lT4lVAARZTrYBGcE1oeb4Y39skCX9VOeOGo3AZ4Y-KRB6So8yzJ0EK1/s96-no/support.png);}
#menu li#contact a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyZSuX7G6l82wLcaTHX9H3iWilyXsePq9ZWtojLDNK-UJ80XT6NT_yu4_AtiZ4bCf54X6QMMvwQ6CSOpHG_wZ3sCU74zRE8bfw7B8T7UeFScWF7vt6n5hi41eCgY6hSaFDCTUY8fip8zmw/s96-no/contact.png);}
* html #menu li#home a {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXIxuKORgDFZVvrdVak5luBY8_L2ZCJUCvOVcczeAS3Hsjmxz9NLWuKgyO3H0rRPag_3lt-OwsPgM3CY5bmPQMZ4cw9zH8Fw_REI29zMCZPCn9goUOrCDeHb5TBwyfvSOitHyg6jiubWxo/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/AVvXsEjSpPQij4fhtu0sa1YR-H_kwm_Z1lKisO06-n9oUFiU-ck9aMgitTHDWBjQvYL7citXlqir2BQnWiCcNkxctqMFl80hmu2K6BXWdLKjPSC-Fmnm58q_5yXbXwYG8q-jCiuAbc8i_Eh-0VMB/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/AVvXsEixFg-FS-lcms7Q-n8dvyT25jFgyQTqcXdbW1y-bg9uWLYexMCrimOLTobPPSjallXZoU40KPCG1HFXIkyb_lI3agiZmx4CjAOw4-FDdHlfs5VIkul2d_CqOfYc-vICPtILPcDypIeKi9Zy/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/AVvXsEhapUloyuQc_22XyJhpPMMjM9wrF52LY7rypD_ukOou0jIMVUiXiM863ys32I4umo2Twc4Pyt7INZfStI7cHRTEesF_5vXdKaM7BvTI6b9aZulmXM4SnJRXjMATLPYDN59qfamUkODKh4N0/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/AVvXsEh0TchCvCrYfHOlK7YC3NwdkwaT8Ak2MB8ppRuAgchYLTauw7tmU6rNIAsq1_IEboPwHbK-LmGRkEHOWSfoVo0jTyKqoyUVPBrEpSddlp8aj_MaBOA6XCHReQ_FkwiSw8LCNCuQF_dPee4G/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/AVvXsEhIpBVMq-Em14JQIMaTk0RVXWH2f1AuKc8whz-u7ZMwHOL3FytolOGcTPui7-XmAigCEbbPtdet3FO9tncfdSWZ3lT4lVAARZTrYBGcE1oeb4Y39skCX9VOeOGo3AZ4Y-KRB6So8yzJ0EK1/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/AVvXsEiyZSuX7G6l82wLcaTHX9H3iWilyXsePq9ZWtojLDNK-UJ80XT6NT_yu4_AtiZ4bCf54X6QMMvwQ6CSOpHG_wZ3sCU74zRE8bfw7B8T7UeFScWF7vt6n5hi41eCgY6hSaFDCTUY8fip8zmw/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>
0 komentar:
Posting Komentar