aligning the text in nav menu also IOS/ touch friendly - html

Question

I am trying to move the starting text in my nav menu more to the left and make the rest align up correctly in-between the gaps also i have noticed this dose not work on touch devices like the iPhone. I believe this is possible via the CSS sheet without having to use JavaScript.
Any help would be much appreciated
Many thanks
http://jsfiddle.net/p6Bj5/
HTML
<div class="navbar">
<ul id="nav">
<li>
Homepage
</li>
<li><a heref="#">About Us</a>
<ul>
<li>About</li>
<li>Allies</li>
<li>Rank</li>
</ul>
</li>
<li>
Members
</li>
<li>
Forums
</li>
<li><a heref="#">Stats</a>
<ul>
<li>In-Game Stats</li>
<li>Outfit Stats</li>
</ul>
</li>
<li><a heref="#">Media</a>
<ul>
<li>Downloads</li>
<li>Gallery</li>
<li>Videos</li>
<li>Live Streams</li>
</ul>
</li>
<li>
Events
</li>
</ul>
</div>
CSS
#charset "utf-8";
body {
font: 80%/1.4 Arial, Helvetica, sans-serif;
background-color:#000;
margin: 0;
padding: 0;
}
.navbar {
background-image:url(http://gbprojects.net/images/top_06.jpg);
width: 937px;
height: 48px;
line-height: 48px;
margin: 0 auto;
}
#nav{
list-style:none;
font-weight:normal;
margin: 0px;
line-height: 38px;
/* Clear floats */
float:left;
width:100%;
height: 38px;
font-size: 18px;
font-weight: bold;
/* Bring the nav above everything else--uncomment if needed.
position:relative;
z-index:5;
*/
}
#nav li{
float:left;
margin-right:40px;
position:relative;
}
#nav a{
display:block;
padding:10px;
color:#fff;
background: transparent;
text-decoration:none;
text-shadow: black 0.1em 0.1em 0.2em;
}
#nav a:hover{
color:#000;
text-decoration:none;
text-shadow: none;
}
/*--- DROPDOWN ---*/
#nav ul{
background: #02949d; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
list-style:none;
position:absolute;
margin-top: -10px;
margin-left: -20px;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
line-height: 20px;
z-index: 100;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
-webkit-border-radius: 0px 0px 7px 7px;
border-radius: 0px 0px 7px 7px;
-webkit-box-shadow: 0px 5px 3px 0px rgba(0, 0, 0, .25);
-moz-box-shadow: 0px 5px 3px 0px rgba(0, 0, 0, .25);
box-shadow: 0px 5px 3px 0px rgba(0, 0, 0, .25);
}
#nav ul li{
margin-left: -40px;
margin-right: 50px;
font-size: 12px;
padding-top:0px; /* Introducing a padding between the li and the a give the illusion spaced items */
float:none;
z-index: 100;
}
#nav ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
z-index: 100;
}
#nav li:hover ul{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
z-index: 100;
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
background: transparent;
color: #000;
text-decoration:none;
z-index: 100;
text-shadow: none;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration:none;
z-index: 100;
margin-left: 20px;
text-shadow: none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
background: transparent;
color: #fff;
z-index: 100;
margin-left: 20px;
text-shadow: none;
}
x;
line-height: 58px;

Answer 1

Your issue is that you are using a background image for the navigation bar. Because the words are different lengths you will need to go in and change the margins individually for each link. It is either that or add backgrounds to the ul and li which would have been the preferable method.

Answer 2

Try using like this.
.navbar {
background: url(http://gbprojects.net/images/top_06.jpg) 35px 0px no-repeat;
}
Don't give a huge margin to the elements for alignment.
Be specific to your background image for header because it seems no to be as perfect as should be.
You can keep it as plan background and put border-left or border-right properties to show a difference in between the list items. That is the good way of handling such cases. Hope it helps you.