【css样式】用javascript写个简单下拉菜单，css出现个小问题。

本帖最后由 xx954076071 于 2010-12-21 09:48:15 编辑

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

记住ul默认是有padding的
所以你要ul {padding:0}才可以哦~下面的代码试试
<html>
<head>
<title>
javascript
</title>
<style type="text/css">   * {
    margin:0px;
    border:#234353 0px solid;
}
  #menu {
    margin:30px 0px 0px 300px;
    width:300px;
    height:25px;
}
  #menu ul {
    margin:0px;
    width:300px;
    height:25px;
padding:0;
}
#menu ul li,menu ul li ul li {
    cursor:pointer;
    border-width:1px;
    text-align:center;
    list-style-type:none;
    float:left;
    width:80px;
    height:25px;
    line-height:25px;
    margin-right:8px;
}
a {
   text-decoration:none;
}
#menu ul li a:hover,menu ul li ul li {
    color:#4345ef;
}
#menu ul li ul {
  display:none;
  position:absolute;
  margin:22px 0px 0px 0;     //问题在这，开始我写的是22 0 0 0 ，可下拉菜单错位了。改成22 0 0 -80才行。这是为什么啊？！
  width:80px;
  height:50px;
}
</style>
</head>
<body><script type="text/javascript">
function showSub(li){
  var sub=li.getElementsByTagName("ul")[0];
  sub.style.display="block";
}
function display(li){
  var sub=li.getElementsByTagName("ul")[0];
  sub.style.display="none";
}
</script>
<div id="menu">
<ul>
<li onmouseover="showSub(this);" onmouseout="display(this);"><a href="#">军事</a><div style="clear:both"></div>
<ul>
   <li><a href="#">陆军</li>
   <li><a href="#">海军</li>
</ul>
</li>
<li onmouseover="showSub(this);" onmouseout="display(this);"><a href="#">体育</a>
<ul>
   <li><a href="#">NBA</li>
   <li><a href="#">CBA</li>
   <li><a href="#">FIFA</li>
</ul>
</li>
<li onmouseover="showSub(this);" onmouseout="display(this);"><a href="#">经济</a>
<ul>
   <li><a href="#">股市</li>
   <li><a href="#">楼市</li>
   <li><a href="#">体彩</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
        #menu ul li ul
        {
            display:none;
            position: absolute;
            margin: 22px 0 0 0;
            width:80px;
            height:50px;
            padding: 0;
        }
什么叫只纠正了一半什么浏览器？
把我的代码复制过去然后run一下看看