css下拉菜单问题

在第36行加了边框，但是没有反应。
还有为什么有的下拉框中文字前有点，有的文字前没点。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{
margin:0px;
padding:0px;
}
#nav li{
list-style:none;
float:left;
}
#nav li a{
display:block;
background:#003399;
line-height:24px;
width:70px;
text-align:center;
}
#nav li a:link{
color:#fff;
font-size:12px;
text-decoration:none;
}
#nav li a:hover{
color:#003399;
background:#fff;
}#nav li ul{
width:70px;
float:none;
display:none;
border-left:1px solid #000;
}
#nav li ul a:link{
color:#003399;
background:#fff;
}
#nav li:hover ul{
display:block;
}
</style>
</head><body>
    <div id=div_center>
        <UL id=nav>
            <LI style="MARGIN-LEFT: 10px">
                <A href="http://www.codefans.net">
                    主站索引
                </A>
            </LI>
            <LI>
                <A href="#">
                    新闻中心
                </A>
                <UL>
                    <LI>
                        <A href="#">
                            ·新闻中心1
                        </A>
                    </LI>
                    <LI>
                        <A href="#">
                            ·新闻中心3
                        </A>
                    </LI>
                </UL>
            </LI>
            <LI>
                <A href="#">
                    企业简介
                </A>
                <UL>
                    <LI>
                        <A href="#">
                            ·企业简介
                        </A>
                    </LI>
                    <LI>
                        <A href="#">
                            ·产品中心
                        </A>
                    </LI>
                    <LI>
                        <A href="#">
                            ·服务专区
                        </A>
                    </LI>
                </UL>
            </LI>
            <LI>
                <A href="#">
                    文章中心
                </A>
                <UL>
                    <LI>
                        <A href="#">
                            ·文章中心
                        </A>
                    </LI>
                    <LI>
                        <A href="#">
                            ·文章中心
                        </A>
                    </LI>
                </UL>
            </LI>
            <LI>
                <A href="#">
                    国际新闻
                </A>
                <UL>
                    <LI>
                        <A href="#">
                            国际新闻
                        </A>
                    </LI>
                    <LI>
                        <A href="#">
                            国内新闻
                        </A>
                    </LI>
                    <LI>
                        <A href="#">
                            科技新闻
                        </A>
                    </LI>
                </UL>
            </LI>
            <LI>
                <A href="#">
                    图片新闻
                </A>
                <UL>
                    <LI>
                        <A href="#">
                            ·图片中心
                        </A>
                    </LI>
                    <LI>
                        <A href="#">
                            ·图片中心
                        </A>
                    </LI>
                </UL>
            </LI>
            <LI>
                <A href="#">
                    下载中心
                </A>
                <UL>
                    <LI>
                        <A href="#">
                            ·常用软件
                        </A>
                    </LI>
                    <LI>
                        <A href="#">
                            ·文档下载
                        </A>
                    </LI>
                    <LI>
                        <A href="#">
                            社区论坛
                        </A>
                    </LI>
                </UL>
        </UL>
    </div>
</body>
</html>css

解决方案 »

  1.   

    1. LZ应该通过浏览器的开发者调试工具看看页面的HTML代码是否和自己料想的一致。
       下面是根据LZ提供的代码，通过浏览器查看得到的
       
       <li>
                    <a href="#">新闻中心
                    <ul>
                        <li>
                            <a href="#">·新闻中心1
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a href="#"></li>
                        <li>
                            <a href="#">·新闻中心3
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a href="#"></li>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ul>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a href="#"></li>
       
    2. 部分中文字前有点，部分没有。这个LZ只要细看就能看到，如下面的有点
       
       <A href="#">
       ·文档下载
       </A>
       
       下面的就没有点
       
       <A href="#">
       社区论坛
       </A>
       
      

  2.   

    .clearfix:after { content:' '; display:block; clear:both; height:0; visibility:hidden; }
    .clearfix { *zoom:1; }
    给#nav li ul加类clearfix
      

  3.   

    你用的是<ul><li>它是会有点的，边框的话你（border-left）这个是加左边的，后满你又是写的所写形式，所以没用。
      

  4.   


    36行的加边框呢
    其实LZ你可以看下，我贴出的第一段HTML代码，内部节点的构造和LZ定义的CSS完全不一致。
    LZ提到的36行代码#nav li ul{
        width:70px;
        float:none;
        display:none;
        border-left:1px solid #000;
    }因此相对应的结构是：<ul id="nav">
        <li>
            <ul>
                ...
            </ul>
        </li>
    </ul>但是浏览器解析后的结构是:<li>
        <a href="#">新闻中心
            <ul>
                ...
            </ul>
        </a>
    </li>两者完全不符，因此相对应的CSS也无法应用上。我觉得LZ可以把36行的CSS改为类名的方式.ulstyle {
        width:70px;
        float:none;
        display:none;
        border-left:1px solid #000;
    }然后在ul里引用
      

  5.   


    36行的加边框呢
    其实LZ你可以看下，我贴出的第一段HTML代码，内部节点的构造和LZ定义的CSS完全不一致。
    LZ提到的36行代码#nav li ul{
        width:70px;
        float:none;
        display:none;
        border-left:1px solid #000;
    }因此相对应的结构是：<ul id="nav">
        <li>
            <ul>
                ...
            </ul>
        </li>
    </ul>但是浏览器解析后的结构是:<li>
        <a href="#">新闻中心
            <ul>
                ...
            </ul>
        </a>
    </li>两者完全不符，因此相对应的CSS也无法应用上。我觉得LZ可以把36行的CSS改为类名的方式.ulstyle {
        width:70px;
        float:none;
        display:none;
        border-left:1px solid #000;
    }然后在ul里引用不对啊，display:none;实现了。改了ulstyle还是不行
      

  6.   


    36行的加边框呢
    其实LZ你可以看下，我贴出的第一段HTML代码，内部节点的构造和LZ定义的CSS完全不一致。
    LZ提到的36行代码#nav li ul{
        width:70px;
        float:none;
        display:none;
        border-left:1px solid #000;
    }因此相对应的结构是：<ul id="nav">
        <li>
            <ul>
                ...
            </ul>
        </li>
    </ul>但是浏览器解析后的结构是:<li>
        <a href="#">新闻中心
            <ul>
                ...
            </ul>
        </a>
    </li>两者完全不符，因此相对应的CSS也无法应用上。我觉得LZ可以把36行的CSS改为类名的方式.ulstyle {
        width:70px;
        float:none;
        display:none;
        border-left:1px solid #000;
    }然后在ul里引用不对啊，display:none;实现了。改了ulstyle还是不行LZ，再加个CSS：#nav li ul li{
        border-left:1px solid #000;
    }
    原来的CSS[#nav li ul]里把边框设置去掉。另：我在家里WIN8系统解析HTML结构竟然和公司里WIN7系统解析的HTML结构不一样，太吃惊了
    同样都是chrome，无语啊