Home
Computer
DAFTAR ISI
PROFILE
Style Css Code:
ul#css3menu1,ul#css3menu1 ul{
margin:0;list-style:none;background-color:#e7e700;background-image:url("mainbk.png");background-repeat:repeat;border-width:1px;border-style:solid;border-color:#B4B4B4;-moz-border-radius:28px;-webkit-border-radius:28px;border-radius:28px;}
ul#css3menu1 ul{
display:none;position:absolute;left:0;top:100%;padding:0;background-color:#dddddd;background-image:url("subbk.png");border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}
ul#css3menu1 li:hover>*{
display:block;}
ul#css3menu1 li:hover{
position:relative;}
ul#css3menu1 ul ul{
position:absolute;left:100%;top:0;}
ul#css3menu1{
padding:6px 6px 6px 0;display:block;font-size:0;float:left;}
ul#css3menu1 li{
display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1>li,ul#css3menu1 li{
margin:0 0 0 6px;}
ul#css3menu1 ul>li{
margin:6px 0 0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;}
ul#css3menu1 a,ul#css3menu1 a.pressed{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Arial;color:#666666;cursor:pointer;}
ul#css3menu1 ul li{
float:none;margin:0;}
ul#css3menu1 ul a{
text-align:left;}
ul#css3menu1 li:hover>a{
background-color:#0078ff;border-color:#F8F8F8;border-style:solid;font:12px Arial;color:#ffffff;text-decoration:none;}
ul#css3menu1 img{
border:none;vertical-align:middle;margin-right:8px;}
ul#css3menu1 img.over{
display:none;}
ul#css3menu1 li:hover > a img.def{
display:none;}
ul#css3menu1 li:hover > a img.over{
display:inline;}
ul#css3menu1 li a.pressed img.over{
display:inline;}
ul#css3menu1 li a.pressed img.def{
display:none;}
ul#css3menu1 ul span{
background-image:none;padding-right:16px;}
ul#css3menu1 a{
padding:8px 20px;background-color:;background-repeat:repeat;border-width:0;border-style:solid;border-color:transparent;color:#666666;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{
background-color:#0078ff;border-style:solid;border-color:#F8F8F8;color:#ffffff;text-decoration:none;}
ul#css3menu1 li.topmenu>a{
height:16px;background-color:;background-image:none;background-position:0 0;border-width:1px 0 0 0;border-style:solid;border-color:transparent;border-radius:16px;-moz-border-radius:16px;-webkit-border-radius:16px;font:bold 13px Arial;color:#000000;text-decoration:none;text-shadow:0 1px 1px #000000;line-height:16px;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu>a.pressed{
background-color:#666666;background-image:url("mainbk.png");background-position:0 100%;border-style:solid;border-color:#F8F8F8;font:bold 13px Arial;color:#ff0000;text-decoration:none;text-shadow:0 1px 0 #FFFFFF;line-height:16px;}
ul#css3menu1 li.subfirst>a{
border-radius:9px 9px 0 0;-moz-border-radius:9px 9px 0 0;-webkit-border-radius:9px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;}
ul#css3menu1 li.sublast>a{
border-radius:0 0 9px 9px;-moz-border-radius:0 0 9px 9px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:9px;-webkit-border-bottom-left-radius:9px;}
margin:0;list-style:none;background-color:#e7e700;background-image:url("mainbk.png");background-repeat:repeat;border-width:1px;border-style:solid;border-color:#B4B4B4;-moz-border-radius:28px;-webkit-border-radius:28px;border-radius:28px;}
ul#css3menu1 ul{
display:none;position:absolute;left:0;top:100%;padding:0;background-color:#dddddd;background-image:url("subbk.png");border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}
ul#css3menu1 li:hover>*{
display:block;}
ul#css3menu1 li:hover{
position:relative;}
ul#css3menu1 ul ul{
position:absolute;left:100%;top:0;}
ul#css3menu1{
padding:6px 6px 6px 0;display:block;font-size:0;float:left;}
ul#css3menu1 li{
display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1>li,ul#css3menu1 li{
margin:0 0 0 6px;}
ul#css3menu1 ul>li{
margin:6px 0 0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;}
ul#css3menu1 a,ul#css3menu1 a.pressed{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Arial;color:#666666;cursor:pointer;}
ul#css3menu1 ul li{
float:none;margin:0;}
ul#css3menu1 ul a{
text-align:left;}
ul#css3menu1 li:hover>a{
background-color:#0078ff;border-color:#F8F8F8;border-style:solid;font:12px Arial;color:#ffffff;text-decoration:none;}
ul#css3menu1 img{
border:none;vertical-align:middle;margin-right:8px;}
ul#css3menu1 img.over{
display:none;}
ul#css3menu1 li:hover > a img.def{
display:none;}
ul#css3menu1 li:hover > a img.over{
display:inline;}
ul#css3menu1 li a.pressed img.over{
display:inline;}
ul#css3menu1 li a.pressed img.def{
display:none;}
ul#css3menu1 ul span{
background-image:none;padding-right:16px;}
ul#css3menu1 a{
padding:8px 20px;background-color:;background-repeat:repeat;border-width:0;border-style:solid;border-color:transparent;color:#666666;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{
background-color:#0078ff;border-style:solid;border-color:#F8F8F8;color:#ffffff;text-decoration:none;}
ul#css3menu1 li.topmenu>a{
height:16px;background-color:;background-image:none;background-position:0 0;border-width:1px 0 0 0;border-style:solid;border-color:transparent;border-radius:16px;-moz-border-radius:16px;-webkit-border-radius:16px;font:bold 13px Arial;color:#000000;text-decoration:none;text-shadow:0 1px 1px #000000;line-height:16px;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu>a.pressed{
background-color:#666666;background-image:url("mainbk.png");background-position:0 100%;border-style:solid;border-color:#F8F8F8;font:bold 13px Arial;color:#ff0000;text-decoration:none;text-shadow:0 1px 0 #FFFFFF;line-height:16px;}
ul#css3menu1 li.subfirst>a{
border-radius:9px 9px 0 0;-moz-border-radius:9px 9px 0 0;-webkit-border-radius:9px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;}
ul#css3menu1 li.sublast>a{
border-radius:0 0 9px 9px;-moz-border-radius:0 0 9px 9px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:9px;-webkit-border-bottom-left-radius:9px;}
HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="Ite2_files/css3menu1/style.css" type="text/css" />
</head>
<body style="background-color:#EBEBEB">
<ul id="css3menu1" class="topmenu">
<li class="topmenu"><a href="#" title="Item 0" style="height:16px;line-height:16px;">Item 0</a></li>
<li class="topmenu"><a href="#" title="Item 3" style="height:16px;line-height:16px;"><span>Item 3</span></a>
<ul>
<li class="subfirst"><a href="#" title="Item 3 2">Item 3 2</a></li>
<li><a href="#" title="Item 3 1">Item 3 1</a></li>
<li class="sublast"><a href="#" title="Item 3 0">Item 3 0</a></li>
</ul>
</li>
<li class="topmenu"><a href="#" title="Item 4" style="height:16px;line-height:16px;"><span>Item 4</span></a>
<ul>
<li class="subfirst"><a href="#" title="Item 4 1">Item 4 1</a></li>
<li class="sublast"><a href="#" title="Item 4 0">Item 4 0</a></li>
</ul>
</li>
<li class="topmenu"><a href="#" title="Item 5" style="height:16px;line-height:16px;"><span>Item 5</span></a>
<ul>
<li class="subfirst"><a href="#" title="Item 5 1">Item 5 1</a></li>
<li class="sublast"><a href="#" title="Item 5 0">Item 5 0</a></li>
</ul>
</li>
<li class="topmenu"><a href="#" title="Item 6" style="height:16px;line-height:16px;"><span>Item 6</span></a>
<ul>
<li class="subfirst"><a href="#" title="Item 6 1"><span>Item 6 1</span></a>
<ul>
<li class="sublast"><a href="#" title="Item 6 1 0">Item 6 1 0</a></li>
</ul>
</li>
<li class="sublast"><a href="#" title="Item 6 0">Item 6 0</a></li>
</ul>
</li>
<li class="topmenu"><a href="#" title="Item 7" style="height:16px;line-height:16px;"><span>Item 7</span></a>
<ul>
<li class="sublast"><a href="#" title="Item 7 0">Item 7 0</a></li>
</ul>
</li>
<li class="topmenu"><a href="#" title="Item 8" style="height:16px;line-height:16px;"><span>Item 8</span></a>
<ul>
<li class="subfirst"><a href="#" title="Item 8 3">Item 8 3</a></li>
<li><a href="#" title="Item 8 2">Item 8 2</a></li>
<li><a href="#" title="Item 8 1">Item 8 1</a></li>
<li class="sublast"><a href="#" title="Item 8 0"><span>Item 8 0</span></a>
<ul>
<li class="sublast"><a href="#" title="Item 8 0 0">Item 8 0 0</a></li>
</ul>
</li>
</ul>
</li>
<li class="topmenu"><a href="#" title="Item 9" style="height:16px;line-height:16px;"><span>Item 9</span></a>
<ul>
<li class="subfirst"><a href="#" title="Item 9 2">Item 9 2</a></li>
<li><a href="#" title="Item 9 1">Item 9 1</a></li>
<li class="sublast"><a href="#" title="Item 9 0">Item 9 0</a></li>
</ul>
</li>
<li class="topmenu"><a href="#" title="Item 10" style="height:16px;line-height:16px;"><span>Item 10</span></a>
<ul>
<li class="subfirst"><a href="#" title="Item 10 1">Item 10 1</a></li>
<li class="sublast"><a href="#" title="Item 10 0">Item 10 0</a></li>
</ul>
</li>
<li class="topmenu"><a href="#" title="Item 11" style="height:16px;line-height:16px;"><span>Item 11</span></a>
<ul>
<li class="subfirst"><a href="#" title="Item 11 2">Item 11 2</a></li>
<li><a href="#" title="Item 11 1">Item 11 1</a></li>
<li class="sublast"><a href="#" title="Item 11 0">Item 11 0</a></li>
</ul>
</li>
<li class="topmenu"><a href="#" style="height:16px;line-height:16px;"><img src="Ite2_files/css3menu1/service.png" alt=""/> </a></li>
</ul>
<p style="display:none"><a href="http://css3menu.com/">Drop Down Menu Using CSS Css3Menu.com</a></p>
</body>
</html>
Bantuan : Cara Memasang Menu Di Blogger Template
No comments:
Post a Comment