How could I make following code IE6 compatible?

StackOverflow https://stackoverflow.com/questions/20867012

Pregunta

The code

<html>
<head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
        #topDropDownMenu {
            position: relative;
            background: no-repeat 100% 50%;
            width: 50em;
            max-width: 100%;
            float: left;
        }

            #topDropDownMenu li ul {
                width: 11em !important; /* leaves room for padding */
                cursor: default;
                position: absolute;
                height: auto;
                display: none;
                left: -10px;
                padding: 1px 10px 10px 10px;
                background: url(/img/clear.gif);
            }
            /* All LIs */

            #topDropDownMenu li {
                position: relative;
                width: 8.3em;
                max-width: 16.5%;
                cursor: pointer;
                float: left;
                list-style-type: none;
                font-weight: bold;
                border-style: solid;
                border-width: 1px;
                border-color: #222;
                text-align: center;
                -moz-border-radius: 8px 8px 0px 0px;
            }
                /* sub-menu LIs */

                #topDropDownMenu li ul li {
                    width: 8.3em /*FF*/;
                    padding: 0;
                    border: none;
                    max-width: 100%;
                    border: 1px solid #333;
                    border-top: none;
                    -moz-border-radius: 0px 0px 0px 0px;
                }
                /* All anchors */

                #topDropDownMenu li a {
                    cursor: pointer !important;
                    color: #666;
                    text-decoration: none;
                    display: block;
                    float: left;
                    height: 2em;
                    line-height: 2em;
                    width: 100%;
                    -moz-border-radius: 8px 8px 0px 0px;
                }
                /* sub-menu Anchors */

                #topDropDownMenu li ul li a {
                    width: 8.3em /*FF*/;
                    position: relative !important;
                    cursor: pointer !important;
                    white-space: nowrap;
                    line-height: 1.7em;
                    height: 1.7em;
                    font-weight: normal;
                    color: #666;
                    background-position: 0 50% !important;
                    -moz-border-radius: 0px 0px 0px 0px;
                }
                /*hover*/

                #topDropDownMenu li a:hover, #topDropDownMenu li a:focus, #topDropDownMenu li a:active {
                    color: #000;
                    background: #fff;
                }
                /* display and z-index for the sub-menus */

                #topDropDownMenu li:hover ul, #topDropDownMenu li.msieFix ul {
                    display: block;
                    z-index: 10;
                    top: 2em !important;
                }

                #topDropDownMenu li#aboutDropDown {
                    z-index: 2;
                }

                #topDropDownMenu li#contactDropDown {
                    z-index: 1;
                }

        .aboutDropDown #topDropDownMenu li#aboutDropDown ul, .contactDropDown #topDropDownMenu li#contactDropDown ul {
            display: block;
            top: -1000px;
        }

        #aboutDropDown a {
            background-color: #b9e075;
        }

        #contactDropDown a {
            background-color: #f7c472;
        }

        #topDropDownMenu li.msieFix a {
        }

        .aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:focus, .aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:active, .contactDropDown #topDropDownMenu li#contactDropDown ul li a:focus, .contactDropDown #topDropDownMenu li#contactDropDown ul li a:active, {
            position: absolute !important;
            top: 1028px !important;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="old_hover_menu.css" />
</head>
<body>
    <ul id="topDropDownMenu">
        <li id="aboutDropDown"><a href="#">About</a></li>
        <li id="contactDropDown"><a href="#">Contact</a><ul>
            <li><a href="#">Form</a></li>
            <li><a href="#">Information</a></li>
        </ul>
        </li>
    </ul>
</body>
</body></html>

The Problem: When I hover on the Contact menu, It does not show drop down menu. It it possible to make compatible in IE6.

No hay solución correcta

Otros consejos

You can use this structure :

<!--[if lt IE 7]>      <html class="no-js lt-ie7"> <![endif]-->

and in your CSS file for your Element :

 .lt-ie7 yourDiv{
     //your Style
 }
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top