只要我的鼠标出现在右边，但还没有放到菜单上面，就弹出子菜单

下面这个菜单的Item1和Item2原来是横着排放的，我把它修改为竖着排放后，出现了奇怪现象，只要我的鼠标出现在右边，但还没有放到菜单上面，就弹出子菜单，请问是什么原因，如何解决？-------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>javaScriptDropDownMenu</title>
    <style type="text/CSS">
        * {
            padding:0;
            margin:0;
        }
        body {
            font-family:verdana, sans-serif;
            font-size:small;
        }
        #navigation, #navigation li ul {
            list-style-type:none;
        }
        #navigation {
            margin:20px;
        }
        #navigation li {
            text-align:center;
            position:relative;
        }
        #navigation li a:link, #navigation li a:visited {
            display:block;
            text-decoration:none;
            color:#000;
            width:120px;
            height:40px;
            line-height:40px;
            border:1px solid #fff;
            border-width:1px 1px 0 0;
            background:#c5dbf2;
            padding-left:10px;
        }
        #navigation li a:hover {
            color:#fff;
            background:#2687eb;
        }
        #navigation li ul li a:hover {
            color:#fff;
            background:#6b839c;
        }
        #navigation li ul {
            display:none;
            position:absolute;
            top:40px;
            left:0;
            margin-top:1px;
            width:120px;
        }
        #navigation li ul li ul {
            display:none;
            position:absolute;
            top:0px;
            left:130px;
            margin-top:0;
            margin-left:1px;
            width:120px;
        }
    </style>
    <script type="text/Javascript">
        function displaySubMenu(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "block";
        }
        function hideSubMenu(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "none";
        }
    </script>
</head>
<body>
    <ul id="navigation">
        <li onmouSEOver="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
            <a href="#">Item1</a>
            <ul>
                <li><a href="#">Item1->Menu1</a></li>
                <li><a href="#">Item1->Menu2</a></li>
                <li><a href="#">Item1->Menu3</a></li>
                <li><a href="#">Item1->Menu4</a></li>
            </ul>
</li>
        <li id="tb0" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
            <a href="#">Item2</a>
            <ul>
                <li><a href="#">Item2->Menu1</a></li>
                <li><a href="#">Item2->Menu2</a></li>
                <li><a href="#">Item2->Menu3</a></li>
                <li><a href="#">Item2->Menu4</a></li>
                <li><a href="#">Item2->Menu5</a></li>
            </ul>
        </li>

解决方案 »

  1.   

    <li onmouSEOver="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
    ------>
    <li onmouSEOver="displaySubMenu(this)" onmouseout="hideSubMenu(this)" style="border:1px solid red;">另一个li也加上这个style.让边框显示出来，你再调试一下看是什么问题
      

  2.   

    另一个li也加上这个style.让边框显示出来，你再调试一下看是什么问题
    ------------
    不行啊
      

  3.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>javaScriptDropDownMenu</title>
      <style type="text/CSS">
      * {  padding:0;  margin:0;  }
      body {  font-family:verdana, sans-serif;  font-size:small;  }
      #navigation, #navigation li ul {  list-style-type:none;  }
      #navigation {  margin:20px;  }
      #navigation li {  text-align:center;  position:relative;  }
      #navigation li a:link, #navigation li a:visited {
      display:block;  text-decoration:none;  color:#000;
      width:120px;  height:40px;  line-height:40px;
      border:1px solid #fff;
      border-width:1px 1px 0 0;
      background:#c5dbf2;
      padding-left:10px;
      }
      #navigation li a:hover {  color:#fff;  background:#2687eb;  }
      #navigation li ul li a:hover {  color:#fff;  background:#6b839c;  }
      #navigation li ul {
    display:none;
      position:absolute;
      /*
      top:40px;
      left:0;
      margin-top:1px;
      你既然已经把菜单竖起来了，原来的这些横着的
      样式设置就不知道改改吗？  所以，上面我才让你看书去...
      */
      
      /*    下面是竖着的样式 */
      top:0px;
      left:130px;
      margin-left:1px;
      /*而且我还告诉你，烦事还多着呢，最头痛的是各浏览器的兼容，
        还要对CSS进行改造,hack。不懂CSS怎么搞？呵呵
      */
      width:120px;
      }
      #navigation li ul li ul {
      display:none;
      position:absolute;
      top:0px;
      left:130px;
      margin-top:0;
      margin-left:1px;
      width:120px;
      }
      </style>
      <script type="text/Javascript">
      function displaySubMenu(li) {
      var subMenu = li.getElementsByTagName("ul")[0];
      subMenu.style.display = "block";
      }
      function hideSubMenu(li) {
      var subMenu = li.getElementsByTagName("ul")[0];
      subMenu.style.display = "none";
      }
      </script>
    </head>
    <body>
      <ul id="navigation">
        <li onmouSEOver="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
          <a href="#">Item1</a>
          <ul>
            <li><a href="#">Item1->Menu1</a></li>
            <li><a href="#">Item1->Menu2</a></li>
            <li><a href="#">Item1->Menu3</a></li>
            <li><a href="#">Item1->Menu4</a></li>
          </ul>
        </li>
        <li id="tb0" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
          <a href="#">Item2</a>
          <ul>
            <li><a href="#">Item2->Menu1</a></li>
            <li><a href="#">Item2->Menu2</a></li>
            <li><a href="#">Item2->Menu3</a></li>
            <li><a href="#">Item2->Menu4</a></li>
            <li><a href="#">Item2->Menu5</a></li>
          </ul>
        </li>
      </ul>
    </body>
    </html>
      

  4.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>javaScriptDropDownMenu</title>
      <style type="text/CSS">
      * {  padding:0;  margin:0;  }
      body {  font-family:verdana, sans-serif;  font-size:small;  }
      #navigation, #navigation li ul {  list-style-type:none;  }
      #navigation {  margin:20px;  }
      #navigation li {  text-align:center;  position:relative;}
      #navigation li a:link, #navigation li a:visited {
      display:block;  text-decoration:none;  color:#000;
      width:120px;  height:40px;  line-height:40px;
      border:1px solid #fff;
      border-width:1px 1px 0 0;
      background:#c5dbf2;
      padding-left:10px;
      }
      #navigation li a:hover {  color:#fff;  background:#2687eb;  }
      #navigation li ul li a:hover {  color:#fff;  background:#6b839c;  }
      #navigation li ul {
    display:none;
      position:absolute;
    /*
      top:40px;
      left:0;
      margin-top:1px;
    你既然已经把菜单竖起来了，原来的这些横着的
    样式设置就不知道改改吗？
    所以，上面我才让你看书去...
    */
      
    /*    下面是竖着的样式 */
    top:0px;
    left:130px;
      margin-left:1px;
      /*而且我还告诉你，烦事还多着呢，最头痛的是各浏览器的兼容，
      还要对CSS进行改造,hack。不懂CSS怎么搞？呵呵
    */
      width:120px;
      }
      #navigation li ul li ul {
      display:none;
      position:absolute;
      top:0px;
      left:130px;
      margin-top:0;
      margin-left:1px;
      width:120px;
      }
      </style>
      <script type="text/Javascript">
      function displaySubMenu(li) {
      var subMenu = li.getElementsByTagName("ul")[0];
      subMenu.style.display = "block";
      }
      function hideSubMenu(li) {
      var subMenu = li.getElementsByTagName("ul")[0];
      subMenu.style.display = "none";
      }
      </script>
    </head>
    <body>
      <ul id="navigation">
        <li onmouSEOver="displaySubMenu(this)" onmouseout="hideSubMenu(this)" style=" border:1px solid red;/*调试时使用border.调试好后删除*/ ">
          <a href="#">Item1</a>
          <ul>
            <li><a href="#">Item1->Menu1</a></li>
            <li><a href="#">Item1->Menu2</a></li>
            <li><a href="#">Item1->Menu3</a></li>
            <li><a href="#">Item1->Menu4</a></li>
          </ul>
        </li>
        <li id="tb0" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)" style=" border:1px solid red;/*调试时使用border.调试好后删除*/ ">
          <a href="#">Item2</a>
          <ul>
            <li><a href="#">Item2->Menu1</a></li>
            <li><a href="#">Item2->Menu2</a></li>
            <li><a href="#">Item2->Menu3</a></li>
            <li><a href="#">Item2->Menu4</a></li>
            <li><a href="#">Item2->Menu5</a></li>
          </ul>
        </li>
      </ul>
    加了 style=" border:1px solid red;以后看到【只要我的鼠标出现在右边，
    但还没有放到菜单上面，就弹出子菜单】是什么原因了吧？
    另外，我上面的样式也只是个大概，只想告诉你个思路，如何解决问题。最终还是
    你自己解决比较好。磨刀不误砍柴工
    </body>
    </html>
      

  5.   

    只解决你的疑问： #navigation li {
      text-align:center;
      position:relative;
      width:120px;
      }
    li的宽度是100%，a的宽度是120px，你给li绑定的事件哦~。多用firebug