css full image background

below is sample of Perfect Full Page Background Image, Awesome, Easy, Progressive with CSS3 Way

html {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Works in:

Safari 3+
Chrome Whatever+
IE 9+
Opera 10+ (Opera 9.5 supported background-size but not the keywords)
Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

CSS-Only with Technique #2
html:

<div id="bg">
        <img src="images/bg.jpg" alt="">
</div>

css:

#bg {
        position:fixed;
        top:-50%;
        left:-50%;
        width:200%;
        height:200%;
}
#bg img {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        min-width:50%;
        min-height:50%;
}

Works in:

Safari / Chrome / Firefox (didn’t test very far back, but recent versions are fine)
IE 8+
Opera (any version) and IE both fail in the same way (wrongly positioned, not sure why)

source: http://css-tricks.com

CSS Drop Down Menu with list

CSS code:

#menu ul {list-style:none; padding:0; margin:0; position:absolute; z-index:2}
#menu li {float: left;}
#menu ul ul{visibility:hidden; width:125px;} /*menyembunyikan sub menu saat non mouse over */
#menu ul li:hover ul{visibility:visible} /*menampilkan sub menu saat non mouse over */
#menu li a{background-color:#252525; height:35px; width:125px; display:block; color:#b4b4b4; font-family:Tahoma, Geneva, sans-serif;
text-decoration:none; font-size:13px; line-height:30px;  text-align:center;}
#menu li a:hover{background:#414141; color:#ffffff}

HTML code:

</pre>
<div id="menu">
<ul>
	<li><a href="URL 1">TYPE</a>
<ul>
	<li><a href="#">Sub menu 1</a></li>
	<li><a href="#">Sub menu 2</a></li>
	<li><a href="#">Sub menu 3</a></li>
</ul>
</li>
	<li><a href="#">COUNTRY</a></li>
	<li><a href="#">MAKER</a></li>
	<li><a href="#">VINTAGE</a></li>
	<li><a href="#">PRICE RANGE</a></li>
</ul>
</div>
<pre>

css navigation menu

this is just a bit example for making menu navigation with ccs:

css:

a.menu_nav{
width: 106px; /*this is important */
height: 40px; /*this is important */
background-image:url(images/nav_bg.jpg); /*this is important */
float:left;
border: 0px;
display: block;
text-decoration: none;
text-align:center;
}
a.menu_nav:link {font-size:13px; line-height:35px; color:#656565}
a.menu_nav:visited {font-size:13px; line-height:35px; color:#656565}
a.menu_nav:hover {background-position: 0-40px;}

a.menu:hover {
background-position: 0-40px; /*this is important */
}

html:

<div>
  <a href="#" class="menu_nav">Home</a>
  <a href="#" class="menu_nav">About US</a>
  <a href="#" class="menu_nav">Product</a>
  <a href="#" class="menu_nav">News Update</a>
  <a href="#" class="menu_nav">Contact Us</a>
</div>