List item Not Cooperate with the Firefox

Question

When I goes to list this will pop out Sub list like this. This is Working with Chrome and Opera. But in Firefox browser its shows like this.

Html code

<div id="left">
    <ul>
    <li><a href="#" id="left_menu_title" style="background:#00025b; color:#FFFFFF; font-family:Segoe UI; font-size:15pt;border-top-left-radius:5px; border-top-right-radius:5px; height:35px;">Categories</a></li>
    <li><a href="printing_materials.php" >Printing Materials</a></li>
    <li><a href="display_main.php" >Display Signs</a>
        <ul style="z-index:100000;">
            <li><a href="display_banner_stands.php">BANNER STANDS</a></li>
            <li><a href="display_lbs_crystal_light_box.php">Crystal Light Box</a></li>
            <li><a href="display_lbs_floor_standing_light_box.php">Floor Standing Light Box</a></li>
            <li><a href="display_lbs_menu_light_box.php">Menu Light Box</a></li>
            <li><a href="display_lbs_snap_frame_light_box.php">Snap Frame Light Box</a></li>
            <li><a href="display_lbs_taxi_top_light_box.php">Taxi top light box</a></li>
            <li><a href="display_lbs_vacuum_forming.php">Vacuum Forming</a></li>
        </ul>
    </li>
    <li><a href="panel_main.php" >Panel</a>
        <ul style="z-index:100000;">
            <li><a href="panel_ab_acp_board.php">ACP board</a></li>
            <li><a href="panel_ab_kt_ps.php">KT PS Foam Board</a></li>
            <li><a href="panel_ab_pc_solid_board.php">PC Solid board</a></li>
            <li><a href="panel_ab_pp_hollow_sheet.php">PP hollow sheet</a></li>
            <li><a href="panel_acrylic_sheet.php">Acrylic Plastic For Poster Frame</a></li>
            <li><a href="panel_pvc_free.php">PVC free foam board</a></li>
        </ul>
    </li>
    <li><a href="acc_main.php">Accessories</a>
        <ul style="z-index:100000;">
            <li><a href="acc_door_sign_plate.php">Door Sign Plate</a></li>
            <li><a href="acc_glue.php">Glue</a></li>
            <li><a href="acc_grommet_manual_tools.php">Grommet ManualTools</a></li>
            <li><a href="acc_name_plate_flat.php">Name Plate Flat Type</a></li>
            <li><a href="acc_name_plate_triangle.php">Name Plate Triangle Type</a></li>
            <li><a href="acc_squeegee_plastic_squeegee.php">Plastic squeegee</a></li>
            <li><a href="acc_tapes.php">Tapes</a></li>
            <li><a href="acc_utility_knife.php">Utility knife</a></li>
        </ul>
    </li>
    <li><a href="mac_main.php" style="border-bottom-left-radius:5px; border-bottom-right-radius:5px;">Machinery</a>
        <ul style="z-index:100000;">
            <li><a href="mac_cutting_machine.php">Cutting Machine</a></li>
            <li><a href="mac_laminating_machine.php">Laminating Machine</a></li>
            <li><a href="mac_laser_machine.php">Laser Machine</a></li>
            <li><a href="mac_machine_printer.php">Printer</a></li>
            <li><a href="mac_plotter_vinyl_plotter.php">Vinyl Plotter</a></li>
    </ul>
    </li>
</ul>
 </div>

CSS Code

#left
{
    width:200px;
    float:left;
}
#left_menu
{
    width:200px;
    float:left;
    margin-top:10px;
    border:1px solid #999999;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; /* future proofing */
    -khtml-border-radius: 5px; /* for old Konqueror browsers */
}
#left_menu ul li
{
    font-size: 13pt;
    float:none;
    display: -webkit-box;
    background: url(../images/nav_bg.png) repeat-x;
}

#left_menu ul li a {
    width: 200px;
    display: table-cell;
    color: #000000;
    text-decoration: none;
    text-align: center;
    height: 38px;
    vertical-align: middle;
}

#left_menu ul li a:hover
{
    background-color:#d0d0d0;
    color: #616292;
    font-weight: bold;
}
#left_menu li:hover ul{
    display:inline-table;
}

#left_menu li ul li a{
    height: 35px;
    background-color: #f0f0f0;
    color: #7e7e7e !important;
    }
#left_menu li ul {
    height : 50px;
    margin-left: 0px;
    position:absolute;
    z-index:100000;
    display:none;
    font-size: 12pt;
}
#left_menu li ul li{

    margin: 0px;
    padding: 0px;
    width: 200px;
    float:none;
    border:1px solid #d0d0d0;
    font-size: 11pt;

}
#left_menu ul li:hover
{
    background-color:#d0d0d0;
}
#left_menu li ul li a:hover{
    background-color:#d5d5d5;
}

How to fix this. Where this css style going out.

Answer 1

Add some more css property

#left_menu li{
    position:relative
}

#left_menu li ul {
    left:200px;
    top:0px;
}