Archive for category css
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>
Multiple background images
This is a test page for multiple backgrounds on one div element.
Do they show up?
#example1 {
width: 500px;
height: 250px;
background-image: url(background1.png), url(background2.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}