Fixed menu bar

Hi.
i use created a menu by using a software for navigation menu.

the problem is that menu is floating.

but i want it to be fixed, like facebook, wibiya.com

can anyone help me ?

 

Could you post your code or give a link to what you have currently?

If you want to consider just making a new one from tutorials so you understand how it works better.

http://css.maxdesign.com.au

These have some great menu tutorials just look in the listamatic sections for them.

 

Thanks for answer.

i the software created many .js files and one .css file.


here is the .css code.

ul#deluxeMenu,ul#deluxeMenu ul{
	margin:0;list-style:none;background-color:#000;border-width:0px;border-style:none;border-color:#C0AF62;}
ul#deluxeMenu .frame{
	display:none;position:absolute;left:4px;top:100%;background-image:url("sub.png");}
ul#deluxeMenu li:hover>*{
	display:block;}
ul#deluxeMenu li:hover{
	position:relative;}
ul#deluxeMenu ul .frame{
	position:absolute;left:104%;top:0;}
ul#deluxeMenu{
	padding:10px 10px 10px 0;display:block;font-size:0;position:fixed;z-index:1000;left:0;top:0;}
ul#deluxeMenu .trCorner,ul#deluxeMenu .blCorner{
	display:block;margin:0;font-size:0;position:absolute;width:6px;height:6px;background-image:url("sub.png");}
ul#deluxeMenu .trCorner{
	left:100%;top:0;background-position:100% 0;}
ul#deluxeMenu .blCorner{
	left:0;top:100%;background-position:0 100%;}
* HTML ul#deluxeMenu{
	position:absolute;}
ul#deluxeMenu ul{
	position:relative;left:6px;top:6px;border:none;background-image:url("sub.png");background-position:100% 100%;padding:0 6px 6px 0;background-color:#25333b;border-width:0px;border-style:none;}
ul#deluxeMenu li{
	display:block;white-space:nowrap;font-size:0;float:left;}
ul#deluxeMenu>li,ul#deluxeMenu li{
	margin:0 0 0 10px;}
ul#deluxeMenu ul>li{
	margin:10px 0 0;}
ul#deluxeMenu a:active, ul#deluxeMenu a:focus{
	outline-style:none;}
ul#deluxeMenu a,ul#deluxeMenu li.dis a:hover{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:normal 12px Arial,Helvetica,sans-serif;color:#9ed9b3;cursor:pointer;padding:5px 15px 5px 5px;background-color:#25333b;background-repeat:repeat;border-width:0px;border-style:none;border-color:#FCEEB0;}
ul#deluxeMenu ul li{
	float:none;margin:0;}
ul#deluxeMenu ul a,ul#deluxeMenu ul li.dis:hover a{
	text-align:left;}
ul#deluxeMenu li:hover>a{
	background-color:#2a404d;border-color:#4C99AB;border-style:none;font:normal 12px Arial,Helvetica,sans-serif;color:#8ed997;text-decoration:none;}
ul#deluxeMenu li.dis a{
	color:#AAAAAA !important;}
ul#deluxeMenu img{
	border:none;vertical-align:middle;margin-right:5px;}
ul#deluxeMenu img.over{
	display:none;}
ul#deluxeMenu li.dis:hover a img.over{
	display:none !important;}
ul#deluxeMenu li.dis:hover a img.def{
	display:inline !important;}
ul#deluxeMenu li:hover > a img.def{
	display:none;}
ul#deluxeMenu li:hover > a img.over{
	display:inline;}
ul#deluxeMenu span{
	display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#deluxeMenu ul span{
	background-image:url("arrowsub.png");padding-right:18px;}
ul#deluxeMenu ul a,ul#deluxeMenu ul li.dis a:hover{
	padding:5px 15px;background-color:#25333b;border-width:0 0 1px 0;border-style:solid;border-color:#3a4e59;color:#9ed9b3;}
ul#deluxeMenu ul li:hover>a{
	background-color:#2a404d;border-color:#3a4e59;color:#9fd9b9;}
ul#deluxeMenu li.topmenu>a,ul#deluxeMenu li.topmenu.dis a:hover{
	height:33px;background-color:transparent;background-image:url("back-normal.png");border-width:0px;border-style:none;font:14px Arial,Helvetica,sans-serif;color:#FFFFFF;text-decoration:none;background-position:100% 0;line-height:33px;}
ul#deluxeMenu li.topmenu:hover>a{
	background-color:transparent;background-image:url("back-over-sub.png");border-style:none;font:14px Arial,Helvetica,sans-serif;color:#FFFFFF;text-decoration:none;line-height:33px;}
ul#deluxeMenu li.topmenu,ul#deluxeMenu li.topmenu.dis:hover{
	margin:0 15px 0 10px;background-color:transparent;background-image:url("back-normal.png");background-position:0 0;}
ul#deluxeMenu li.topmenu:hover{
	background-color:transparent;background-image:url("back-over-sub.png");}
ul#deluxeMenu li.topmenu>a,ul#deluxeMenu li.topmenu.dis:hover>a{
	margin:0 -15px 0 15px;}
ul#deluxeMenu li.ln>a,ul#deluxeMenu li.ln.dis a:hover{
	height:33px;background-color:#25333b;background-image:url("back-normal.png");border-width:0 0 1px 0;border-style:solid;font:14px Arial,Helvetica,sans-serif;color:#9ed9b3;text-decoration:none;background-position:100% 0;border-color:#3a4e59;padding:5px 15px;line-height:33px;}
ul#deluxeMenu li.ln:hover>a{
	background-color:#2a404d;background-image:url("back-over-sub.png");border-style:none;font:14px Arial,Helvetica,sans-serif;color:#9fd9b9;text-decoration:none;border-color:#3a4e59;line-height:33px;}
ul#deluxeMenu li.ln,ul#deluxeMenu li.ln.dis:hover{
	margin:0 15px 0 10px;background-color:transparent;background-image:url("back-normal.png");background-position:0 0;}
ul#deluxeMenu li.ln:hover{
	background-color:transparent;background-image:url("back-over-sub.png");}
ul#deluxeMenu li.ln>a,ul#deluxeMenu li.ln.dis:hover>a{
	margin:0 -15px 0 15px;}
ul#deluxeMenu .submenu>li{
	margin:0;}
ul#deluxeMenu .submenu{
	background-color:#25333b;border-width:0px;border-style:none;padding:0 6px 6px 0;}
ul#deluxeMenu .submenu>li>a,ul#deluxeMenu .submenu>li.dis a:hover{
	padding:5px 15px;}
ul#deluxeMenu li.submenu>a,ul#deluxeMenu li.submenu.dis a:hover{
	background-color:#25333b;border-width:0 0 1px 0;border-style:solid;border-color:#3a4e59;padding:5px 15px;color:#9ed9b3;}
ul#deluxeMenu li.submenu:hover>a{
	background-color:#2a404d;border-color:#3a4e59;color:#9fd9b9;}

PHP:

 

Ä°sn't there any webdesigner who is professional at this topic ?

 

what do you mean by fixed ?.......

should stay in same place even if the page is scrolled? or the menu also should scroll with the page ?

 

Thannks for answer.

yes ofcourse/

like FACEBOOK chat bar.

or like wibiya.com (you can see it in this adress)

i have even showed my .css code