Drowdown菜单不工作在IE 9

我有一个基于CSS的下拉菜单，在Firefox和Chrome中很棒，但是在IE中它的子菜单不会下拉。我曾经为SHORT工作，但现在又一次没有工作。请帮忙！Drowdown菜单不工作在IE 9

网址：itsjust4me.com

CSS：

body,ul,li{font-family:Arial,Helvetica,sans-serif;font-size:14px;text-align:left;} 
    #menu{ 
    line-height:21px; 
    background:#ED7CD4; 
    border-radius:8px 8px 0 0; 
    -moz-border-radius:8px 8px 0 0; 
    -webkit-border-radius:8px 8px 0 0; 
    box-shadow:0 0 1px #EDF9FF inset; 
    height:50px; 
    list-style:none outside none; 
    margin:0; 
    padding:0 10px 0px 5px; 
    z-index:50000; 
    } 

    #menu li{border:medium none;display:block;float:left;margin-right:2px;margin-top:10px;margin-bottom:-3px;padding:4px 10px;position:relative;text-align:center;} 
    li.lessline{line-height:150%!important;margin-bottom:7px!important;}#menu li:hover{border-radius:5px 5px 0px 0px; background:#FCEFF9;border:1px solid #777777;padding:4px 9px;}#menu li a{color:#FFFFFF;display:block;font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:400;outline:0 none;text-decoration:none;text-shadow:1px 1px 1px #000000;}#menu li:hover a{color:#B10D90;text-shadow:1px 1px 1px #FFFFFF;}#menu li .drop{background:url("img/drop.png") no-repeat scroll right 8px transparent;padding-right:21px;font-weight:700;}#menu li .noarrow{background:none!important;padding-right:0;font-weight:700;}#menu li:hover .drop{background:url("img/drop.png") no-repeat scroll right 7px transparent;}.dropdown_1column,.dropdown_2columns,.dropdown_3columns,.dropdown_4columns,.dropdown_5columns{-moz-border-bottom-colors:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;background:#FCEFF9;border-color:-moz-use-text-color #777777 #777777;border-image:none;border-radius:0 5px 5px 5px;border-right:1px solid #777777;border-style:none solid solid;border-width:medium 1px 1px;float:left;left:-999em;margin:4px auto;padding:10px 5px;position:absolute;text-align:left;box-shadow:0px 12px 10px #000;-moz-box-shadow:0px 12px 10px #000;-webkit-box-shadow:0px 10px 10px #000;}.dropdown_1column{width:140px;}.dropdown_2columns{width:280px;}.dropdown_3columns{width:420px;}.dropdown_4columns{width:560px;}.dropdown_5columns{width:700px;}#menu li:hover .dropdown_1column,#menu li:hover .dropdown_2columns,#menu li:hover .dropdown_3columns,#menu li:hover .dropdown_4columns,#menu li:hover .dropdown_5columns{left:-1px;top:auto;}.col_1,.col_2,.col_3,.col_4,.col_5{display:inline;float:left;margin-left:5px;margin-right:5px;position:relative;}.col_1{width:130px;}.col_2{width:270px;}.col_3{width:410px;}.col_4{width:550px;}.col_5{width:690px;}#menu .menu_right{float:right;margin-right:0;}#menu li .align_right{border-radius:5px 0 5px 5px;}#menu li:hover .align_right{left:auto;right:-1px;top:auto;}#menu p,#menu h2,#menu h3,#menu ul li{font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:21px;text-align:left;text-shadow:1px 1px 1px #FFFFFF;}#menu h2{border-bottom:1px solid #B10D90;font-size:21px;font-weight:700;letter-spacing:-1px;margin:7px 0 14px;padding-bottom:14px;color:#B10D90;}#menu h3{border-bottom:1px solid #00ACED;font-size:14px;margin:7px 0 14px;padding-bottom:7px;color:#00ACED;}#menu p{line-height:18px;margin:0 0 10px;}#menu li:hover div a{color:#015B86;font-size:14px;}#menu li:hover div a:hover{color:#029FEB;}.strong{font-weight:bold;}.italic{font-style:italic;}.imgshadow{background:none repeat scroll 0 0 #FFFFFF;border:1px solid #777777;box-shadow:0 0 5px #666666;margin-top:5px;padding:4px;}.img_left{float:left;margin:5px 15px 5px 5px;width:auto;}#menu li .black_box{background-color:#333333;border-radius:5px 5px 5px 5px;box-shadow:0 0 3px #000000 inset;color:#EEEEEE;padding:4px 6px;text-shadow:1px 1px 1px #000000;}#menu li ul{list-style:none outside none;margin:0 0 12px;padding:0;}#menu li ul li{float:none;font-size:12px;line-height:24px;margin:0;padding:0;position:relative;text-align:left;text-shadow:1px 1px 1px #FFFFFF;width:130px;}#menu li ul li:hover{background:none repeat scroll 0 0 transparent;border:medium none;margin:0;padding:0;}#menu li .greybox li{background:none repeat scroll 0 0 #FFE0F8;border:1px solid #EDC4E3;border-radius:5px 5px 5px 5px;margin:0 0 4px;padding:4px 6px;width:116px;}#menu li .greybox li:hover{background:none repeat scroll 0 0 #FFFFFF;border:1px solid #AAAAAA;margin:0 0 4px;padding:4px 6px;}#menu .search{background:none!important;border:none!important;border-radius:0!important;padding:0!important; display:block;}#menu .search:hover{background:none!important;border:none!important;border-radius:0!important;padding:0!important;} 
    #menu th {background:#F7D7EF;border-right:solid 1px rgb(232, 208, 226); border-bottom:solid 1px rgb(232, 208, 226); color:#B10D90 !important;} 
    #menu td {border-bottom:dashed 1px rgb(232, 208, 226);} 
    .menutableright {border-right:dashed 1px rgb(232, 208, 226);} 
    .single {border-radius:5px 5px 5px 5px !important;}

HTML

头

<link rel="stylesheet" type="text/css" href="../usermods/_INCstyles_.css" media="all"> 
    <link rel="stylesheet" type="text/css" href="../usermods/stylemy.css" media="all"> 
    <link rel="stylesheet" href="../menu/menu.css?v4" type="text/css" media="screen"/> 
    <style> 
    <!--[if IE]> 
    body { 
    background-color: #ED7ED7; 
    background-image: url(images-common/bgrd.jpg); 
    background-repeat: repeat-x; 
    dropdown_4columns {width:56ypx !important;} 
    behavior: url("http://wwww.itsjust4me.com/menu/csshover3.htc"); 
    } 
    <![endif]--> 
    </style>

身体

<ul id="menu"> 
    <li class="single"><a href="http://www.itsjust4me.com/Scripts/default.asp" class="drop noarrow">Home</a> 
    <li class="single"><a href="http://www.itsjust4me.com/content/Pages/Products.html" class="drop noarrow">Products</a> 
    <li><a href="http://www.itsjust4me.com/content/Pages/Products.html" class="drop">Shop By Category</a> 
    <div class="dropdown_4columns"> 
    <div class="col_1"> 
    <ul> 
    <li class="lessline"><a href="http://www.itsjust4me.com/categories/Products/Personalized-Step-Stools.html">Personalized Step Stools</a></li> 
    <li class="lessline"><a href="http://www.itsjust4me.com/categories/Products/Personalized-CDs.html">Personalized CD's</a></li> 
    <li class="lessline"><a href="http://www.itsjust4me.com/categories/Products/Personalized-Name-Puzzles.html">Personalized Name Puzzles</a></li> 
    <li class="lessline"><a href="http://www.itsjust4me.com/categories/Products/Personalized-Coat-Racks.html">Personalized Coat Racks</a></li> 
    <li class="lessline"><a href="http://www.itsjust4me.com/Products/Personalized-Scrubs/Personalized-Kids-Scrubs.html">Personalized Kids Scrubs</a></li> 
    </ul> 
    </div> 
    <div class="col_1"> 
    <ul> 
    <li class="lessline"><a href="http://www.itsjust4me.com/categories/Products/Personalized-Name-Trains.html">Personalized Name Trains</a></li> 
    <li class="lessline"><a href="http://www.itsjust4me.com/Categories/Products/Personalized-Crayola-Gifts.html">Personalized Crayola</a></li> 
    <li class="lessline"><a href="http://www.itsjust4me.com/content/Pages/Personalized-Sports_Gifts.html">Personalized Sports Gifts</a></li> 
    <li class="lessline"><a href="http://www.itsjust4me.com/categories/Products/Quilted-Backpacks.html">Personalized Backpacks</a></li> 
    <li class="lessline"><a href="http://www.itsjust4me.com/content/Pages/All-Fatheads.html">Fathead Decals</a></li> 
    </ul> 
    </div> 
    <div class="col_2"> 
    <a href="http://www.itsjust4me.com/content/Pages/All-Fatheads.html" alt="Fathead Decals, Personalized Stools, Personalized CD's"/><img src="http://www.itsjust4me.com/prodimages/Fathead-Kids-sm.jpg" width="260" class="" alt="Fathead Decals" border="0"/></a> 
    <span style="width:100%; height:2px;">&nbsp;</span> 
    </div> 
    <div class="col_4"> 
    <div class="col_2" style="width:265px !important;"> 
    <a href="http://www.itsjust4me.com/categories/Products/Personalized-Step-Stools.html"><img src="http://www.itsjust4me.com/prodimages/Personalized-Stools-Img1.png" width="260" class="" alt="Personalized CD's, Personalized Stools" border="0"/></a> 
    </div> 
    <div class="col_2" style="width:265px !important;"> 
    <a href="http://www.itsjust4me.com/categories/Products/Personalized-CDs.html"><img src="http://www.itsjust4me.com/Scripts/images-common/hpcd.jpg" width="260" class="" alt="Personalized CD's, Personalized Stools" border="0"/></a></div> 
    </div> 
    </div> 
    </li> 
    <li><a href="#" class="drop">Shop By Theme</a> 
    <div class="dropdown_2columns"> 
    <div class="col_2"> 
    <h2>Coming Soon</h2> 
    </div> 
    </div> 
    </li> 
    <li class="single"><a href="http://www.itsjust4me.com/content/Pages/FAQ.html" class="drop noarrow">FAQ</a></li> 
    <li><a href="#" class="drop">Shipping</a> 
    <div class="dropdown_4columns align_right"> 
    <div class="col_4"> 
    <H2>Product Delivery Times</H2> 
    </div> 
    <div class="col_4"> 
    <table style="width: 100%; margin-top:-5px;"> 
    <tr> 
    <th align="center">Product Type</th> 
    <th align="center">Manufacturing/Processing</th> 
    <th align="center" style="border-right:none !important;">Shipping</th> 
    </tr> 
    <tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';"> 
    <th align="center">Personalized CDs</th> 
    <td align="center" class="menutableright">2-3 Days</td> 
    <td align="center">3-4 Days</td> 
    </tr> 
    <tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';"> 
    <th align="center">Personalized Books</th> 
    <td align="center" class="menutableright">2-3 Days</td> 
    <td align="center">3-4 Days</td> 
    </tr> 
    <tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';"> 
    <th align="center">Personalized Step Stools</th> 
    <td align="center" class="menutableright">3-5 Weeks</td> 
    <td align="center">3-4 Days</td> 
    </tr> 
    <tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';"> 
    <th align="center">Personalized Name Boards</th> 
    <td align="center" class="menutableright">3-5 Weeks</td> 
    <td align="center">3-4 Days</td> 
    </tr> 
    <tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';"> 
    <th align="center">Personalized Coat Racks</th> 
    <td align="center" class="menutableright">3-5 Weeks</td> 
    <td align="center">3-4 Days</td> 
    </tr> 
    <tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';"> 
    <th align="center">Personalized Clocks</th> 
    <td align="center" class="menutableright">5-7 Days</td> 
    <td align="center">3-4 Days</td> 
    </tr> 
    <tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';"> 
    <th align="center">Personalized Name Trains</th> 
    <td align="center" class="menutableright">2-5 Days</td> 
    <td align="center">3-4 Days</td> 
    </tr> 
    </table> 
    </div> 
    </div> 
    </li> 
    <li class="menu_right search"><form method="post" action="/scripts/chshowinfo.php" style="width:156px !important;"> 
    <input name="txtsearch" id="txtsearch" style="border: 1px solid rgb(177, 13, 144); border-radius: 4px 4px 4px 4px; text-align: left; margin-top: 3px; padding: 4px 0px 4px 2px;" placeholder="Search Products" type="text" value=""/> 
    </form> 
    </li> 


    </ul>

来源

2012-10-18 Rahil Pirani

我用这里的指令来建立菜单http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down -menu/ –

你能为此创建一个jsfiddle吗？ – PhonicUK

问题是，IE跳转到怪癖模式。请阅读此处以获得概述：http://hsivonen.iki.fi/doctype/ –