CSS Help: Menu moves in relation to browser window

[lpepin]

I'm a beginner with CSS, and any help would be appreciated!

I'm building a site using a Joomla template, and the main navigation menu (#navr) just won't stay in one place.

Here's the site: http://www.mcsnewyork.com/

And all code pertaining to the navigation, some commented out because I didn't like it but didn't want to delete it. As you can see... there's a lot.

#navr {background: height:30px; background-position:center; //background:url(../images/nav.jpg); width: 65%; overflow: hidden; margin-top:-30px; position:relative;  margin-bottom:-20px;}
#navr .menu li a{list-style-type: none; float: right; display:inline; overflow: hidden;}
#navr ul {list-style-type:none; float:right;  width:700px; /*overflow: hidden;*/ font-family: verdana, georgia, sans-serif; display:block; border-right: 4px; padding-top: 20px;}
#navr ul li a {list-style-type: none; float: right; padding:0 5px; line-height:30px;color:#fff;font-weight:100;text-decoration:none;font-size:14px; overflow: hidden; text-shadow:1px 1px #000}
#navr ul li.active {}
#navr ul li.active a {color:#fff; background:url(../images/nav-a.jpg) 0 0 repeat-x}
#navr ul li a:hover{color:#fff;text-decoration:none !important;background:url(../images/nav-a.jpg) 0 0 repeat-x}
#navr ul li:hover ul li a {text-shadow:none;}
#navr ul li:hover ul li { background:none;}


/*#navr {z-index:10; position:relative;}*/
/*#mnav .menu li a{list-style-type:none;float:right; display:inline;overflow: hidden;}
#mnav ul {list-style-type:none; float:right; overflow: hidden; font-family: verdana, georgia, sans-serif; display:inline;}*/
/*#navr ul li {height:30px;}*/

/*#mnav ul li:hover {}*/

/*#navr ul li ul {position:absolute;width:180px;left:-999em;}*/
/*#mnav ul li:hover ul, #menu ul li.parent  ul {left:0;}*/
/*#navr ul li ul li {padding:0;height:auto;width:180px; margin:0; border:none;}*/

/*#navr ul li:hover ul li a, #mnav ul li ul li a, #mnav ul li.active ul li a{margin:0; padding:0 0 0 10px;height:30px;line-height:30px; background:#484848;border-bottom:1px solid #3a3a3a;color:#d1d1d1; font-size:11px;font-weight:normal;text-shadow:none;}*/
/*#navr ul li ul li a:hover, #mnav ul li ul li.active a, #mnav ul li.active ul li a:hover, #mnav ul li.active ul li.active a {margin:0; padding:0 0 0 10px;height:35px;line-height:35px;background:#343434;color:#fff; font-size:11px;text-shadow:none;}*/
/*#navr ul li ul ul, #mnav ul li:hover ul ul, #mnav ul li:hover ul ul ul, #mnav ul li:hover ul ul ul ul, #mnav ul li.sfHover ul ul, #mnav ul li.sfHover ul ul ul, #mnav ul li.sfHover ul ul ul ul {left:-999em;}*/
/*#mnav ul.menu li a
{
}*/

THANK YOU!

[aaronhockey_09]

Hey, theres alot of weird coding going on.

its floating the <a> tag in the navigation but not the individual LI's.

What you need to do is set the width of the #navr and then center it
#navr { width:1000px; margin:0 auto; }

then im not sure if you want things on the left, right or centered.
So we are just going to put it on the left.

ul.menu { float:left; }

That should atleast get you started, again, not 100% sure what your trying to do, and the styling is pretty messy.