Print this pageUntuk membuat menu seperti di atas kodenya adalah sebagai berikut :
<html>
<head>
<style type="text/css">
#pad {height:140px;}
#menu {padding:0; margin:0; list-style:none;}
#menu li {float:left; margin-right:1px;}
#menu li a {display:block; width:0; height:0; border-left:25px dashed transparent; border-right:75px dashed transparent; border-bottom:15px solid #000; position:relative; font-family:arial, sans-serif; font-size:11px; color:#fff; text-decoration:none;}
#menu li b {position:absolute; left:-25px; top:15px; height:25px; width:100px; background:#000; line-height:20px; text-align:center; cursor:pointer;}
#menu li a:hover,
.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
{color:#000; border-bottom:15px solid #6cf;}
#menu li a:hover 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:#6cf;}
</style>
</head>
<body>
<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>
</body>
</html>
<head>
<style type="text/css">
#pad {height:140px;}
#menu {padding:0; margin:0; list-style:none;}
#menu li {float:left; margin-right:1px;}
#menu li a {display:block; width:0; height:0; border-left:25px dashed transparent; border-right:75px dashed transparent; border-bottom:15px solid #000; position:relative; font-family:arial, sans-serif; font-size:11px; color:#fff; text-decoration:none;}
#menu li b {position:absolute; left:-25px; top:15px; height:25px; width:100px; background:#000; line-height:20px; text-align:center; cursor:pointer;}
#menu li a:hover,
.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
{color:#000; border-bottom:15px solid #6cf;}
#menu li a:hover 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:#6cf;}
</style>
</head>
<body>
<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>
</body>
</html>
Artikel Terkait
A M A R A J E N
0 komentar
Posting Komentar