How to make a nav bar with a arrow on top when hovering on it ?

I want a nav bar like below which shows an arrow icon above it when mouse hovers on it.




Can anybody help me?


This is nav bar code that i am currently using:

#navbar {


background-color:black;
}


ul#navigation {	
	width:1000px;
	list-style:none;
	
margin:0px;
padding:0px;
}

ul#navigation li {
	display:inline
}

ul#navigation li a {

	height:42px;
	float:left;
	text-indent:-9999px;
	text-decoration:none
}

ul#navigation  li a span {
	float:left;
	display:block
}

ul#navigation li#navigation-1 a {
	width:59px;
	background:url(/templates/27/allnavs.jpg) no-repeat 0px 0
}

ul#navigation li#navigation-1 a:active,
ul#navigation li#navigation-1 a:hover {
	background-position:0px -42px
}
ul#navigation li#navigation-1 a.current {
	background-position:0px -84px
}

ul#navigation li#navigation-2 a {
	width:82px;
	background:url(/templates/27/allnavs.jpg) no-repeat -59px 0
}

ul#navigation li#navigation-2 a:active,
ul#navigation li#navigation-2 a:hover {
	background-position:-59px -42px
}
ul#navigation li#navigation-2 a.current {
	background-position:-59px -84px
}

ul#navigation li#navigation-3 a {
	width:72px;
	background:url(/templates/27/allnavs.jpg) no-repeat -141px 0
}

ul#navigation li#navigation-3 a:active,
ul#navigation li#navigation-3 a:hover {
	background-position:-141px -42px
}
ul#navigation li#navigation-3 a.current {
	background-position:-141px -84px
}

ul#navigation li#navigation-4 a {
	width:69px;
	background:url(/templates/27/allnavs.jpg) no-repeat -213px 0
}

ul#navigation li#navigation-4 a:active,
ul#navigation li#navigation-4 a:hover {
	background-position:-213px -42px
}
ul#navigation li#navigation-4 a.current {
	background-position:-213px -84px
}

ul#navigation li#navigation-5 a {
	width:67px;
	background:url(/templates/27/allnavs.jpg) no-repeat -282px 0
}

ul#navigation li#navigation-5 a:active,
ul#navigation li#navigation-5 a:hover {
	background-position:-282px -42px
}
ul#navigation li#navigation-5 a.current {
	background-position:-282px -84px
}

ul#navigation li#navigation-6 a {
	width:92px;
	background:url(/templates/27/allnavs.jpg) no-repeat -349px 0
}

ul#navigation li#navigation-6 a:active,
ul#navigation li#navigation-6 a:hover {
	background-position:-349px -42px

		 
	 
}
ul#navigation li#navigation-6 a.current {
	background-position:-349px -84px
}

ul#navigation li#navigation-7 a {
	width:559px;
	background:url(/templates/27/allnavs.jpg) no-repeat -441px 0
}

ul#navigation li#navigation-7 a:active,
ul#navigation li#navigation-7 a:hover {
	background-position:-441px -42px

}
ul#navigation li#navigation-7 a.current {
	background-position:-441px -84px
}

Code (markup):

Please say what necessary changes should i have to give?


Thanks in advance!

 

Sorry but I am getting a headache just looking at this code. Why do you have each link coded separately? If you're making your navigation in a list form <ul><li>... </li></ul> and all the menu items function the same, you don't need to single them out. Perhaps part of your problem is that you're targeting each element. From my own experience, when you try to target things in list menus, things get wacked (especially on sub-menus). Try using general code, and testing it on one link first.

 

you need to work with Jquery

 

I am not actually making the nav bar i shown above..Its just a eg ..I am making another one with sprites that's why the code looks like this and how should i make the arrow appear on each link when mouse hover on it??

Thank you

 

Can you please say the code to make this appear?
I am not well with jquery too

 

You do not need to use jQuery. HTML and CSS alone will do.

Here are some code you can use, they are very similar to what you are trying to make:

http://www.menubasic.com/Menu/JavaScript-Menus.aspx?p=1