我正在尝试将导航菜单中的起始文本更向左移动，并使其余部分在间隙之间正确对齐，而且我注意到这在 iPhone 等触摸设备上不起作用。我相信这可以通过 CSS 表实现，而无需使用 JavaScript。
任何帮助将非常感激
非常感谢
HTML
<div class="navbar">
<ul id="nav">
<li>
<a href="index.php">Homepage</a>
</li>
<li><a heref="#">About Us</a>
<ul>
<li><a href="index.php?site=about">About</a></li>
<li><a href="index.php?site=static&staticID=4">Allies</a></li>
<li><a href="index.php?site=static&staticID=1">Rank</a></li>
</ul>
</li>
<li>
<a href="index.php?site=members">Members</a>
</li>
<li>
<a href="index.php?site=forum">Forums</a>
</li>
<li><a heref="#">Stats</a>
<ul>
<li><a href="index.php?site=static&staticID=2">In-Game Stats</a></li>
<li><a href="index.php?site=static&staticID=3">Outfit Stats</a></li>
</ul>
</li>
<li><a heref="#">Media</a>
<ul>
<li><a href="index.php?site=files">Downloads</a></li>
<li><a href="index.php?site=gallery ">Gallery</a></li>
<li><a href="index.php?site=videos">Videos</a></li>
<li><a href="index.php?site=liveshow">Live Streams</a></li>
</ul>
</li>
<li>
<a href="index.php?site=forum">Events</a>
</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;