Print this pageUntuk membuat Menu Dropline Up seperti di atas adalah :
<html>
<head>
<style type="text/css">
#pad {height:130px;}
#dropline {padding:0; margin:0 auto 0 auto; list-style:none; height:40px; position:relative; width:532px; float:left;}
#dropline table {border-collapse:collapse: width:0; height:0; margin:-1px -10px;}
#dropline li {float:left;}
#dropline li a b {display:block; height:45px; line-height:34px; width:76px; float:left; color:#000; text-decoration:none; font-family:arial, sans-serif; font-size:11px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihd7Q0rjo5xMER7rGp3t09KiTWzPguJGGYXRAZ3xmXqYuSC-Mk_lDA8o3YSIr8HipkxWXOV2xF4ukL9pPWqKjjpKIgxpy-qi_1IIm3vc49AGdQ9Sav74fhT3A2DuVAVj6XyKP-Hr_eqfvy/w76-h45-no/off.png); text-align:center;}
* html #dropline li a b {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihd7Q0rjo5xMER7rGp3t09KiTWzPguJGGYXRAZ3xmXqYuSC-Mk_lDA8o3YSIr8HipkxWXOV2xF4ukL9pPWqKjjpKIgxpy-qi_1IIm3vc49AGdQ9Sav74fhT3A2DuVAVj6XyKP-Hr_eqfvy/w76-h45-no/off.png', sizingMethod='scale'); cursor:pointer;}
#dropline li a:hover b {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1gYV7UgCSnKeA438eUVonmVuNhg_8w_3xPls5fXY7Dk0YqEHjYeRioemzF22XfMRnrmnMNwQ567-fuYaQBBr_ch5WS0Or-S61DuAH4P0tZbmD5e8lrW0GPmlR3Y8KA5DfyooE-uBCtQrz/w76-h45-no/on.png); color:#fff; white-space:nowrap; cursor:pointer;}
* html #dropline li a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1gYV7UgCSnKeA438eUVonmVuNhg_8w_3xPls5fXY7Dk0YqEHjYeRioemzF22XfMRnrmnMNwQ567-fuYaQBBr_ch5WS0Or-S61DuAH4P0tZbmD5e8lrW0GPmlR3Y8KA5DfyooE-uBCtQrz/w76-h45-no/on.png', sizingMethod='scale'); cursor:pointer;}
#dropline li:hover > a b {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1gYV7UgCSnKeA438eUVonmVuNhg_8w_3xPls5fXY7Dk0YqEHjYeRioemzF22XfMRnrmnMNwQ567-fuYaQBBr_ch5WS0Or-S61DuAH4P0tZbmD5e8lrW0GPmlR3Y8KA5DfyooE-uBCtQrz/w76-h45-no/on.png); color:#fff;}
#dropline ul {padding:0; margin:0; list-style:none; position:absolute; height:25px; width:532px; left:-9999px; top:-25px; z-index:10;}
#dropline ul li {height:25px; line-height:25px;}
#dropline ul li a {color:#aaa; padding:0 10px 0 10px; height:25px; line-height:25px; border-right:1px solid #aaa; font-weight:bold; font-size:11px; white-space:nowrap; font-family:arial, sans-serif; font-size:11px; text-decoration:none;}
#dropline ul li a.last {border:none;}
#dropline ul li a:hover {height:25px; line-height:25px; color:#fff;}
#dropline :hover ul {left:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSM9MxxQvUKWlKT-1U6nMD69N7SEWpKTrCd8nMefV1BHXT4lBxWlwNkd4Z87c_WoBaYlh4fdmm2v_BWxqU6_G9p4hX0x-6-hh1NA8zpLbbRDBLmEHPB4iivMrrf1x4Ped-AYzTHLpGZWh4/s100-p-o/trans.gif)}
#dropline li.current a b {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf7PZetPfc-zjWhH5kmZnPmlhiE4EilSmO4zds7E_u1vbBiBCH9sjh1grIT5Vu4D9t2sergTMaYzyZiR8-akm9Jpu02fvVUq1J0Ol6E95oGwpmGHeRyGi5kUW11W-cvFJTE_kI6MywkhgP/w76-h45-no/select.png); line-height:34px; color:#fff;}
* html #dropline li.current a b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf7PZetPfc-zjWhH5kmZnPmlhiE4EilSmO4zds7E_u1vbBiBCH9sjh1grIT5Vu4D9t2sergTMaYzyZiR8-akm9Jpu02fvVUq1J0Ol6E95oGwpmGHeRyGi5kUW11W-cvFJTE_kI6MywkhgP/w76-h45-no/select.png', sizingMethod='scale'); cursor:pointer;}
#dropline li.current ul li a {color:#aaa; padding:0 10px 0 10px; height:25px; line-height:25px; border-right:1px solid #aaa; font-weight:bold; font-size:11px; white-space:nowrap; background:transparent;}
#dropline li.current ul li a.last {border:none;}
#dropline li.current ul li a:hover {height:25px; line-height:25px; color:#fff;}
</style>
</head>
<br/>
<body>
<div id="outer">
<div id="menuHolder">
<ul id="dropline">
<li class="first"><a href="index.html"><b>Home</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div>
<ul class="blank">
<li></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="single.html"><b>Single Level</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div>
<ul class="blank">
<li></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="sub" href="dropdown.html"><b>Dropdown</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div>
<ul>
<li><a href="#url">Dropdown One</a></li>
<li><a href="#url">Dropdown Two</a></li>
<li><a href="#url">Dropdown Three</a></li>
<li><a href="#url">Dropdown Four</a></li>
<li><a class="last" href="#url">Dropdown Five</a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="current"><a class="sub" href="dropline.html"><b>Dropline</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div>
<ul>
<li><a href="#url">Dropline One</a></li>
<li class="current_sub"><a href="#url">Dropline Two</a></li>
<li><a href="#url">Dropline Three</a></li>
<li><a class="last" href="#url">Dropline Four</a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="sub" href="flyout.html"><b>Flyout</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div>
<ul class="right">
<li><a href="#url">Flyout One</a></li>
<li><a href="#url">Flyout Two</a></li>
<li><a href="#url">Flyout Three</a></li>
<li><a href="#url">Flyout Four</a></li>
<li><a class="last" href="#url">Flyout Five</a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="support.html"><b>Support</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div>
<ul class="blank">
<li></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="last"><a href="contact.html"><b>Contact</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div>
<ul class="blank">
<li></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</div>
</body>
</html>
<head>
<style type="text/css">
#pad {height:130px;}
#dropline {padding:0; margin:0 auto 0 auto; list-style:none; height:40px; position:relative; width:532px; float:left;}
#dropline table {border-collapse:collapse: width:0; height:0; margin:-1px -10px;}
#dropline li {float:left;}
#dropline li a b {display:block; height:45px; line-height:34px; width:76px; float:left; color:#000; text-decoration:none; font-family:arial, sans-serif; font-size:11px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihd7Q0rjo5xMER7rGp3t09KiTWzPguJGGYXRAZ3xmXqYuSC-Mk_lDA8o3YSIr8HipkxWXOV2xF4ukL9pPWqKjjpKIgxpy-qi_1IIm3vc49AGdQ9Sav74fhT3A2DuVAVj6XyKP-Hr_eqfvy/w76-h45-no/off.png); text-align:center;}
* html #dropline li a b {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihd7Q0rjo5xMER7rGp3t09KiTWzPguJGGYXRAZ3xmXqYuSC-Mk_lDA8o3YSIr8HipkxWXOV2xF4ukL9pPWqKjjpKIgxpy-qi_1IIm3vc49AGdQ9Sav74fhT3A2DuVAVj6XyKP-Hr_eqfvy/w76-h45-no/off.png', sizingMethod='scale'); cursor:pointer;}
#dropline li a:hover b {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1gYV7UgCSnKeA438eUVonmVuNhg_8w_3xPls5fXY7Dk0YqEHjYeRioemzF22XfMRnrmnMNwQ567-fuYaQBBr_ch5WS0Or-S61DuAH4P0tZbmD5e8lrW0GPmlR3Y8KA5DfyooE-uBCtQrz/w76-h45-no/on.png); color:#fff; white-space:nowrap; cursor:pointer;}
* html #dropline li a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1gYV7UgCSnKeA438eUVonmVuNhg_8w_3xPls5fXY7Dk0YqEHjYeRioemzF22XfMRnrmnMNwQ567-fuYaQBBr_ch5WS0Or-S61DuAH4P0tZbmD5e8lrW0GPmlR3Y8KA5DfyooE-uBCtQrz/w76-h45-no/on.png', sizingMethod='scale'); cursor:pointer;}
#dropline li:hover > a b {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1gYV7UgCSnKeA438eUVonmVuNhg_8w_3xPls5fXY7Dk0YqEHjYeRioemzF22XfMRnrmnMNwQ567-fuYaQBBr_ch5WS0Or-S61DuAH4P0tZbmD5e8lrW0GPmlR3Y8KA5DfyooE-uBCtQrz/w76-h45-no/on.png); color:#fff;}
#dropline ul {padding:0; margin:0; list-style:none; position:absolute; height:25px; width:532px; left:-9999px; top:-25px; z-index:10;}
#dropline ul li {height:25px; line-height:25px;}
#dropline ul li a {color:#aaa; padding:0 10px 0 10px; height:25px; line-height:25px; border-right:1px solid #aaa; font-weight:bold; font-size:11px; white-space:nowrap; font-family:arial, sans-serif; font-size:11px; text-decoration:none;}
#dropline ul li a.last {border:none;}
#dropline ul li a:hover {height:25px; line-height:25px; color:#fff;}
#dropline :hover ul {left:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSM9MxxQvUKWlKT-1U6nMD69N7SEWpKTrCd8nMefV1BHXT4lBxWlwNkd4Z87c_WoBaYlh4fdmm2v_BWxqU6_G9p4hX0x-6-hh1NA8zpLbbRDBLmEHPB4iivMrrf1x4Ped-AYzTHLpGZWh4/s100-p-o/trans.gif)}
#dropline li.current a b {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf7PZetPfc-zjWhH5kmZnPmlhiE4EilSmO4zds7E_u1vbBiBCH9sjh1grIT5Vu4D9t2sergTMaYzyZiR8-akm9Jpu02fvVUq1J0Ol6E95oGwpmGHeRyGi5kUW11W-cvFJTE_kI6MywkhgP/w76-h45-no/select.png); line-height:34px; color:#fff;}
* html #dropline li.current a b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf7PZetPfc-zjWhH5kmZnPmlhiE4EilSmO4zds7E_u1vbBiBCH9sjh1grIT5Vu4D9t2sergTMaYzyZiR8-akm9Jpu02fvVUq1J0Ol6E95oGwpmGHeRyGi5kUW11W-cvFJTE_kI6MywkhgP/w76-h45-no/select.png', sizingMethod='scale'); cursor:pointer;}
#dropline li.current ul li a {color:#aaa; padding:0 10px 0 10px; height:25px; line-height:25px; border-right:1px solid #aaa; font-weight:bold; font-size:11px; white-space:nowrap; background:transparent;}
#dropline li.current ul li a.last {border:none;}
#dropline li.current ul li a:hover {height:25px; line-height:25px; color:#fff;}
</style>
</head>
<br/>
<body>
<div id="outer">
<div id="menuHolder">
<ul id="dropline">
<li class="first"><a href="index.html"><b>Home</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div>
<ul class="blank">
<li></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="single.html"><b>Single Level</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div>
<ul class="blank">
<li></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="sub" href="dropdown.html"><b>Dropdown</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div>
<ul>
<li><a href="#url">Dropdown One</a></li>
<li><a href="#url">Dropdown Two</a></li>
<li><a href="#url">Dropdown Three</a></li>
<li><a href="#url">Dropdown Four</a></li>
<li><a class="last" href="#url">Dropdown Five</a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="current"><a class="sub" href="dropline.html"><b>Dropline</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div>
<ul>
<li><a href="#url">Dropline One</a></li>
<li class="current_sub"><a href="#url">Dropline Two</a></li>
<li><a href="#url">Dropline Three</a></li>
<li><a class="last" href="#url">Dropline Four</a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="sub" href="flyout.html"><b>Flyout</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div>
<ul class="right">
<li><a href="#url">Flyout One</a></li>
<li><a href="#url">Flyout Two</a></li>
<li><a href="#url">Flyout Three</a></li>
<li><a href="#url">Flyout Four</a></li>
<li><a class="last" href="#url">Flyout Five</a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="support.html"><b>Support</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div>
<ul class="blank">
<li></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="last"><a href="contact.html"><b>Contact</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div>
<ul class="blank">
<li></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</div>
</body>
</html>
Artikel Terkait
A M A R A J E N
0 komentar
Posting Komentar