我正在使用自己的设计创建一个网站，最近遇到了一个问题。这是关于菜单样式的定位方式。我觉得这个问题很难解释，所以首先，我将展示图像。
它应该看起来像：
http: //i.imgur.com/XINIlXC.jpg
它看起来像：http:
//i.imgur.com/RKrFZVz.jpg
如您所见，这是一个简单的水平菜单，菜单项之间有分隔符，但棘手的部分是角落。在一切正常的图像中，我使用了一个杂乱的代码，它与列表不兼容，稍后我将需要它来创建下拉菜单。
所以，这是凌乱的代码：
<div class="menu" id="menu-item">
<img src="images/top_menu_edge.png" style="margin-left:-23px;"/> <span style="margin-right:10px"> 1aaaa <span class="ms"></span> 2bbbb <span class="ms"></span> 3 </span>
</div>
span.ms 只是菜单分隔符。至于所有其他部分，我将展示一个 css 代码。
#menu-item
{
position: absolute; /* The absolute position shouldn't be a problem, because everything is contained in div#header, and it's position is relative. */
bottom: 12px;
right: 0;
height: 34px;
background-position: bottom right;
z-index: 5;
color: #192c51;
}
.menu
{
position: absolute;
bottom: 0;
right: 0;
height: 34px;
background-image: url('images/top_menu_bg.png');
background-position: bottom right;
z-index: 5;
color: #192c51;
这
是修复的代码，但由于某种原因，图像无法正常工作：
<div class="menu" id="menu-item">
<div class="menu-item">
<img src="images/top_menu_edge.png" style="margin-left:-23px;"/>
<ul id="nav">
<li> Pagrindinis </li>
<li> Apie mus </li>
<li> Paslaugos </li>
<li> Kontaktai </li>
</ul>
</div>
</div>
ul 和 li 的额外 css 行：
#nav
{
list-style:none;
float:left;
}
#nav > li {
float: left;
}
#nav li+li
{
background:url('images/top_menu_sep.png') no-repeat top left;
padding-left:10px;
}
差不多就是这样，我真的不明白为什么标签会破坏这一切，但我需要它来做到这一点。有没有人有任何问题，如何解决它，或者可以告诉我方法？我会很感激的。
干杯:)