用CSS做菜单时遇到的格式问题

Question

我参考外国网站做了一个Horizontal dropdown pop menu，用CSS实现的。
现遇到一个问题不明白，就是当菜单项(li)里输入的是英文时，显示格式正常。
（即每个菜单项之间有隔开）
但用中文时，菜单项(Li)中间的空格就没了，全连在一起，并且菜单项里的中文字全靠到菜单项的上边了，很不美观，请兄弟们帮忙。<div>
    <ul>
        <li>菜单
            <ul>
                <li>菜单项</li>
                <li>菜单项</li>                
                <li>菜单项</li>
                <li>菜单项</li>
            </ul>
        </li>
    </ul>
</div>

Answer 1

<div>
    <ul>
        <li>菜单
            <ul>
                <li>菜单项</li>
                <li>菜单项</li>                
                <li>菜单项</li>
                <li>菜单项</li>
            </ul>
        </li>
    </ul>
</div>ul 定义的呢,这个就像代码只是显示出来的,代码在CSS里面,你没有写出来,怎么样改啊!
给一个你看看
<div id="submenu"> 
<ul>
<li id="one"><a title="首页" href="http://www.w3cn.org/">Home</a></li>
<li id="two"><a title="关于我们" href="http://www.w3cn.org/aboutus.html">关于我们</a></li>
<li id="three"><a title="网站标准" href="http://www.w3cn.org/webstandards.html">网站标准</a></li>
<li id="four"><a title="标准的好处" href="http://www.w3cn.org/benefits.html">标准的好处</a></li>
<li id="five"><a title="怎样过渡" href="http://www.w3cn.org/howto.html">怎样过渡</a></li>
<li id="six"><a title="相关教程" href="http://www.w3cn.org/tutorial.html">相关教程</a></li>
<li id="seven"><a title="工具" href="http://www.w3cn.org/tools.html">工具</a></li>
<li id="eight"><a title="资源及链接" href="http://www.w3cn.org/resources.html">资源及链接</a></li>
<li id="nine"><a title="常见问题" href="http://www.w3cn.org/faq.html">常见问题</a></li>
</ul>
</div> 
样式表代码
#submenu { 
MARGIN: 0px 8px 0px 8px; 
PADDING: 4px 0px 0px 0px; 
BORDER: #fff 1px solid; 
BACKGROUND: #dfdfdf; 
COLOR: #666; 
HEIGHT:25px; } #submenu ul { 
CLEAR: left; 
MARGIN: 0px; 
PADDING:0px; 
BORDER: 0px; 
LIST-STYLE-TYPE: none; 
TEXT-ALIGN: center; 
DISPLAY:inline;
} #submenu li { 
FLOAT: left; 
DISPLAY: block; 
MARGIN: 0px; 
PADDING: 0px; 
TEXT-ALIGN: center} #submenu li a { 
DISPLAY: block; 
PADDING:2px 3px 2px 3px; 
BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px; 
FONT-WEIGHT: bold; 
WIDTH: 100%; 
COLOR: #444; 
TEXT-DECORATION: none; 
} #submenu li a:hover { 
BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px; 
COLOR: #fff; } #submenu ul li#one A { WIDTH: 60px} 
#submenu ul li#two A { WIDTH: 80px} 
#submenu ul li#three A { WIDTH: 80px} 
#submenu ul li#four A { WIDTH: 90px} 
#submenu ul li#five A { WIDTH: 80px} 
#submenu ul li#six A { WIDTH: 80px} 
#submenu ul li#seven A { WIDTH: 60px} 
#submenu ul li#eight A { WIDTH: 90px} 
#submenu ul li#nine A { WIDTH: 80px} 

Answer 2

<div id="menu">
    <ul>
        <li><h2>菜单</h2>
            <ul>
                <li>菜单项</li>
                <li>菜单项</li>                
                <li>菜单项</li>
                <li>菜单项</li>
            </ul>
        </li>
    </ul>
</div>
#menu{float:none;} 
body{behavior:url(csshover.htc);
font-size:100%; 
}
#menu ul li{float:left;width:100%;}
#menu h2, #menu a{ font-size:12px;}
*{margin:0;padding:0;border:none;}
body{margin:0px;}
#menu{
width:100%;
float:left;
}#menu a, #menu h2{
display:block;
border-width:1px;
border-style:solid;
border-color: #A4A4FF #7575FF #4F4FFF #A4A4FF;
white-space:nowrap;
}#menu h2{
width:90px;
border-style:none;
color:#FFFFFF;
text-align:center;
}#menu a{
text-decoration:none;
}#menu a, #menu a:visited{
color:#000066;
background-color:#A4A4FF;
}#menu a:hover{
color:#aa0000;
background-color:#CCCCFF
}#menu a:active{
color:#006600;
background:#CCCCFF;
}#menu ul{
list-style:none;
margin:0;
padding:0;
float:left;
width:90px;
}#menu li li a{
height:22px;
width:110px;
vertical-align:bottom;
text-align:left;
line-height:22px;
}#menu ul li{
border-right:1px solid White; 
}#menu li{
position:relative;
}#menu li li{
position:relative;
top:13px;
height:23px;
line-height:23px;
}#menu ul ul{
position:absolute;
z-index:500;
top:auto;
display:none;
}
div#menu li:hover{
cursor:pointer;
z-index:100;
}div#menu li:hover ul ul {display:none;}div#menu li:hover ul {display:block;}