KiPiPo.com blog gadget design wallpaper web programming review

7Dec/100

create simple menu navigation using CSS


Here i will explain how to make simple menu using CSS (without table) like this.
First create menu using list tag li and make inside <div> element and give it name as "main-menu". After that make css for styling the list.  We must make the list become one line using float:left to make horizontal menu. For the detail you can see in CSS below.

css :

#main-menu {
	width:99%;
}
#main-menu ul{
	list-style:none;/* remove the circle bullet */
}
#main-menu ul li{
	float:left;/*  Make the menu list become one line */
}
#main-menu ul li a{
	display:block;
	width:auto;
	padding:2px 10px;
	text-decoration:none;
	color:#000000;
	border-bottom:solid 2px #999999; /* give  buttom line effect */
	margin:5px;/* give some space between menu */
}
#main-menu ul li a:hover{
	border-bottom:solid 2px #0099FF; /* change the buttom line became blue */
}

DEMO PAGE DOWNLOAD

Related posts:

basic jquery tutorial
CSS Generator Tools
check checkbox with specific value ( using jQuery )
Comments (0) Trackbacks (0)

No comments yet.


Leave a comment

 

No trackbacks yet.