Internet Explorer CSS

Question

I have a dropdown menu on a website that works perfectly on all browsers EXCEPT Internet Explorer. Is there a way to turn it off just for internet explorer? I tried using

-ms-display:none;

(I have no idea if that would ever really work) but that was the only idea I had. Any ideas?

<div style="float:left;">
<ul id="nav" class="dropdown dropdown-linear dropdown-columnar">
    <a href="http://www.redballoontoystore.com/index.php"><li>Home</li></a>
    <a href="http://www.redballoontoystore.com/products/index.php"><li class="dir">Toys
        <ul>
            <li class="dir"><a href="http://www.redballoontoystore.com/buckyballs/index.php">Buckyballs</a></li>
            <li class="dir"><a href="http://www.redballoontoystore.com/calicocritters/index.php">Calico Critters</a></li>
            <li class="dir"><a href="http://www.redballoontoystore.com/games/index.php">Games</a></li>
            <li class="dir"><a href="http://www.redballoontoystore.com/magnetics/index.php">Magnetics</a></li>
            <li class="dir"><a href="http://www.redballoontoystore.com/outdoor/index.php">Outdoor</a></li>
            <li class="dir"><a href="http://www.redballoontoystore.com/playmobil/index.php">Playmobil</a></li>
            <li class="dir"><a href="http://www.redballoontoystore.com/quercetti/index.php">Quercetti</a></li>
            <li class="dir"><a href="http://www.redballoontoystore.com/science/index.php">Science</a></li>
        </ul>
    </li></a>
    <a href="http://www.redballoontoystore.com/calendar/index.php"><li>Calendar</li></a>
    <a href="http://www.redballoontoystore.com/aboutus/index.php"><li>About Us</li></a>
    <a href="http://www.redballoontoystore.com/storeinfo/index.php"><li>Store Info</li></a>
    <a href="mailto:management@redballoontoystore.com"><li>Contact Us</li></a>
</ul>

ul.dropdown {
font: bold 15px/normal Arial, Helvetica, sans-serif; /*make sure to change ul.dropdown a:link, ul.dropdown a:visited, etc, when changing this line*/
 /*letter-spacing: -2px;*/
 text-transform: uppercase;
}

ul.dropdown li {
 padding: 0 10px;
 background-color: transparent;
 color: #c00;
}

ul.dropdown li.last ul li {
 float: right;
}

ul.dropdown a li.hover,
ul.dropdown a li:hover {
 background-color: #cc0000;
 color: #fff;
 border-radius: 4px;
}

ul.dropdown a:link,
ul.dropdown a:visited   { color: #c00; text-decoration: none; font: bold 15px/normal Arial, Helvetica, sans-serif; }
ul.dropdown a:hover     { color: #fff; font: bold 15px/normal Arial, Helvetica, sans-serif;}
ul.dropdown a:active    { color: #ffa500; font: bold 15px/normal Arial, Helvetica, sans-serif;}


/* -- level mark -- */

ul.dropdown ul {
 background-color: #cc0000;
 border-radius: 4px 4px 4px 4px;
 font-size: 12px;
 letter-spacing: normal;
 box-shadow: 0 3px 2px black;
 -ms-display:none;
}

* html ul.dropdown ul {
 width: 960px;
}

    ul.dropdown ul li {
     font-weight: bold;
     box-shadow: none;
     color: #fff;
    }

    /* -- level mark -- */

    ul.dropdown ul ul {
     margin-top: 5px;
     text-transform: none;
     box-shadow: none;
    }

        ul.dropdown ul ul li {
         font-weight: normal;
        }





ul.dropdown *.dir {
 padding-right: 30px;
     /*background-image: url(../../../../images/lwis.celebrity/nav-arrow-down.png);*/
 background-position: 100% 50%;
 background-repeat: no-repeat;
}

ul.dropdown li.hover,
    ul.dropdown li:hover.dir {
 border-radius: 4px 4px 0 0;
}

ul.dropdown ul *.dir {
 background-image: none;
}

Answer 1

There's always the IE css hacks, too. Although they're not preferable, if it's just a real quick and dirty thing, and you need to target IE7 and below, you can just place a * in front of the property.

Example:

div.box {
    display: inline-block;
    *display: inline;
}

That will only show inline in IE7 and below.

Answer 2

You can try using conditional comments to avoid IE executing the code:

<![if !IE]>

Your code

<![endif]>