CSS for navigation sub-menu works in chrome and Firefox differently

Question

have problem in CSS for navigation menu i use micromedia Dreamweaver it display properly in chrome but in Firefox sub-menu drops down under different item then associated with. i have four items in main menu (Home) (Grades) (Demo) (Products) where (Grades) and (Products) has sub-menu. It works fine in chrome but in Firefox when i hover mouse on (Grades) sub-menu of (Grades) displays under (products) and when i hover mouse on (Products) sub-menu appears half out of screen. please help me where do i go wrong. my codes go's as follows

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 {
    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 */
}

Answer 1

    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;
}

In the code pen you might see LESS, on the top right(click on eye icon) to see the CSS.