create simple menu navigation using CSS

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.



	Home
	My Blogs
	About me
	Contact me

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

the various uses of "group by" in mysql

basic jquery tutorial

CSS Generator Tools