PKM 2011

Isnin, 10 Mac 2014

Dropedown list

<div id="wrapper" align="center">
<div id="navMenu" align="center">

<ul>
<li><a href="#">products</a>
<ul>
<li> <a href="#">link item</a></li>
<li> <a href="#">link item</a></li>
<li> <a href="#">link item</a></li>
<li> <a href="#">link item</a></li>
<li> <a href="#">link item</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">products</a>
<ul>
<li> <a href="#">link item</a></li>
<li> <a href="#">link item</a></li>
<li> <a href="#">link item</a></li>
<li> <a href="#">link item</a></li>
<li> <a href="#">link item</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">products</a>
<ul>
<li> <a href="#">link item</a></li>
<li> <a href="#">link item</a></li>
<li> <a href="#">link item</a></li>
<li> <a href="#">link item</a></li>
<li> <a href="#">link item</a></li>
</ul>
</li>
</ul>

<br class="clearfloat" />

</div>
</div>

CSS dropedown

@charset "utf-8";
/* dropedown menu */

#navMenu {
margin:0;
padding:0;
}

#navMenu ul {
margin:0;
padding:0;
line-height:49px;

}

#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#F63;
}

#navMenu ul li a {
text-align:center;
font-family:"Arial", cursive;
text-decoration:none;
height:49px;
width:150px;
display:block;
color:#fff;
border:1px solid #FFF;
text-shadow:1px 1px 1px #000;
}

#navMenu ul ul {
position:absolute;
visibility:hidden;
top:49px;
}

#navMenu ul li:hover ul {
visibility:visible;
}

#navMenu li:hover {
background:#F00;
}

#navMenu ul li:hover ul li a:hover {
background:#ccc;
color:#000;
}

#navMenu a:hover {
color:#000;
}

.cloarfloat {
clear:both;
margin:0;
padding:0;
height: 49px;
width: 1280px;
}#wrapper {
height: 49px;
width: 1280px;
}