终于搞清楚了如何做非表格的导航条

在web标准大潮的冲击下，也学着用div+css定位。但已经形成了多年的习惯，要改掉还真不容易，就像戒烟一样，总想着这是最后一根，于是总也戒不掉。既然对于table的问题已经清楚，工作中，还是尽量少用它，只是有些地方，比如导航条，总也做不好，为了赶时间，还是先用回table了。今天，发了个毒誓，非搞定它不可，真是功夫不负有心人，总算搞清楚了。具体方法记录如下，以备不时之需。

这是样式表：

.menu{...}{text-align:left; background-color:#cccccc;}
.menu ul{...}{margin:0px; padding:0px; width:710px; display:inline-block; overflow:hidden;}
.menu li.link{...}{float:left;width: 100px;height:30px; line-height:30px; vertical-align:middle; background-image: url(Pic/button.gif); text-align: center; list-style-type:none;}

这是HTML：

<!-- 导航条 -->
            <div class="menu">
                <ul>
                    <li class="link">
                     <a class="tuchu" href="#">首页</a>       
                    </li>
                    <li class="link">
                    <a class="tuchu" href="browse/QYWH.aspx">企业文化</a>
                    </li>
                    <li class="link">
                        <a class="tuchu" href="browse/MTXC_List.aspx?dgt">文化活动</a>
                    </li>
                    <li class="link">
                        <a class="tuchu" href="browse/MTXC_List.aspx?mtxc">媒体宣传</a>
                    </li>
                    <li class="link">
                        <a class="tuchu" href="browse/PXGL_List.aspx">培训管理</a>
                    </li>
                    <li class="link">
                        <a class="tuchu" href="browse/JXGL.aspx">绩效管理</a>
                    </li>
                    <li class="link">
                        <a class="tuchu" href="#" onclick="javascript:window.open('/help.htm','about','height=300,width=400,top=100,left=100');">关于</a>
                    </li>
                </ul>
            </div>
        </div>

以前，为啥总是搞不定呢？主要是因为自己的思路有问题，只想着div元素，忘记了还有别的可用，而这里就是用了ul元素达成目标的。

另外，今天又遇到一个问题，如上面的css定义是放在外部文件中的，其中有对于元素背景的设置：back-ground:url(pic/link.gif);，必须把样式表文件与引用文件放在同一文件夹下，指定的背景图片才能正确显示，否则就会失败，但其它样式是没有问题的。这是为什么呢？目前还没有找到答案。