html - 下拉菜单在 IE 9 中不起作用

标签 html css drop-down-menu

我有一个基于 CSS 的下拉菜单，在 Firefox 和 Chrome 中运行良好，但是，在 IE 中，它的子菜单不会下拉。我让它工作了一小段时间，但现在又不工作了。请帮忙!

网址: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>

最佳答案

@Sven 你正中要害! DOCTYPE 已声明，但它被放置在某些 ASP 包含的下方...将其移至页面顶部并成功了!

关于html - 下拉菜单在 IE 9 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12954679/

上一篇：jquery - 无法让 Bootstrap 菜单出现在选项卡内滑出 div

下一篇：javascript - 如何在javascript中更改鱼眼效果中元素之间的边距

相关文章：

javascript - 如何在 HTML 页面中包含 webpack 生成的文件？

jquery - 切换类不起作用？

javascript - Bootstrap Row 从边缘开始

css - 覆盖响应式打印样式

php - CodeIgniter 和 Google 图表 - 基于 mysql 值的下拉列表

html - Suckerfish 菜单下拉菜单在 IE6 和 IE7 中不显示

javascript - 如何在javascript中将值作为参数传递

css - magento - 主题按钮

html - 即使显示 : none; 也难以隐藏导航子菜单

css - 性能问题 : Recalculating Styles takes 200ms in PDF. js

©2024 IT工具网  联系我们