Html CSS导航子菜单在chrome和Firefox中的工作方式不同

导航菜单的CSS中存在问题 我使用微媒体Dreamweaver 它以铬合金正确显示 但在Firefox中，子菜单下拉到不同的项下，然后与关联。 我的主菜单上有四个项目 家用级演示产品 其中等级和产品有子菜单。 它在铬上工作很好 但在Firefox中 当我将鼠标悬停在等级上时，等级子菜单将显示在“产品”下 当我将鼠标悬停在产品上时，子菜单显示在屏幕外的一半。 请帮帮我，我哪里做错了。 我的密码如下

html

在代码笔中，您可能会看到较少的内容，在右上角单击eye图标以查看CSS

<div id="navigation">
          <ul>
            <li class="active"><a href="index.html" class="style19">Home</a</li>
            <li><a href="index.html" class="style19">Class</a>
                <ul class="style19">
                  <li><a href="#" target="_blank">KG Class I and II</a></li>
                  <li><a href="#" target="_blank">Class III to V</a></li>
                  <li><a href="#" target="_blank">Class VI to VIII</a></li>
                  <li><a href="#" target="_blank">Class IX to XII</a> </li>
                </ul>
            </li>
            <li><a href="#" target="_blank" class="style19">Demo</a></li>
            <li><a href="index.html" class="style19">Products</a>
                <ul class="style19">
                  <li><a href="#" target="_blank">iPendrive</a></li>
                  <li><a href="#" target="_blank">Preloaded classpad </a></li>
                  <li><a href="#" target="_blank">iPerform Online</a></li>
                </ul>
            </li>
          </ul>
</div>

     #navigation {
    float: right;
    width: 420px;
    height: 25px;
    margin-top: opx;
    padding: 0px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: small;
    font-weight: bold;
    position:relative;
}

#navigation a {
    float: left;
    width: 100px;
    height: 27px;
    padding: 8px 0 0 0;
    text-align: center;
    text-decoration: none;
    font-size: small;
    background-image:url(../../../www.successopedia.com/img02.jpg);
}


#navigation li {
    position: relative;
    height: 25px;
    width: 50px;
    display: inline;
}

/* SUBMENU*/

#navigation ul {
    position:relative;
    margin-top: 0px;
    padding: 15px 0;
    list-style:none;

}

#navigation li li a {
    display: block;
    float:left;
    width: 150px;
    height:auto;
    padding: 8px 0 0 0;
    text-align:center;
    text-decoration:none;
    font-size:small;
    background-image:none;
    background-color:#FFFFFF;
}


#navigation li li {
    width: 4em; /* force constant width of 3rd level menu items */
    margin-top: 0px;
    border:#000000 thin;
}

#navigation li ul {
    left: -980em; /* second-level lists */
    position:absolute;
    top: 98%;
    z-index: 500;
    margin-left: -120px;
    margin-top: 20px;
    border:#000000 thick;
}

#navigation li:hover ul,   
#navigation li.sfhover ul, 
#navigation li li.sfhover ul, 
#navigation li li li.sfhover ul {
    left: 1%; /* lists nested under hovered list items */
}

#navigation li:hover ul {
    left: 1%; /* overrides left position for 2nd level menu */
}

    Your CSS is far away from being corrected. I have used your HTML and applied new CSS hope it solve your problem. You can check working code at http://codepen.io/gauravshankar/pen/jEJBQw

    HTML 

    <div id="navigation">
              <ul>
                <li class="active"><a href="index.html" class="style19">Home</a</li>
                <li><a href="index.html" class="style19">Class</a>
                    <ul class="style19">
                      <li><a href="#" target="_blank">KG Class I and II</a></li>
                      <li><a href="#" target="_blank">Class III to V</a></li>
                      <li><a href="#" target="_blank">Class VI to VIII</a></li>
                      <li><a href="#" target="_blank">Class IX to XII</a> </li>
                    </ul>
                </li>
                <li><a href="#" target="_blank" class="style19">Demo</a></li>
                <li><a href="index.html" class="style19">Products</a>
                    <ul class="style19">
                      <li><a href="#" target="_blank">iPendrive</a></li>
                      <li><a href="#" target="_blank">Preloaded classpad </a></li>
                      <li><a href="#" target="_blank">iPerform Online</a></li>
                    </ul>
                </li>
              </ul>
    </div>


CSS

#navigation {
  text-align: right;
}
#navigation > ul {
  list-style: none;
}
#navigation > ul > li {
  display: inline-block;
  list-style: none;
  position: relative;
  padding: 20px 40px;
}
#navigation > ul > li ul {
  position: absolute;
  left: 0px;
  top: 100%;
  display: none;
  white-space: nowrap;
}
#navigation > ul > li ul li {
  margin-bottom: 5px;
  text-align: center;
}
#navigation > ul > li:hover ul {
  display: block;
}