2010-07-10 3 views
3

Я работаю над выпадающим meenu, который исчезает в IE 8. Работает отлично в firefox и chrome, но не в IE8. я googled в течение двух дней и сделал много изменений, но все еще не работает в IE. Вот код для CSS.Выпадающее меню исчезает в IE8

.dropdownmenu li, .dropdownmenu li ul 
{ 
display: block;display:inline;float:none; 
} 

dropdownmenu ul:hover , .dropdownmenu ul li:hover 
{ 
display: block;display:inline; float:none; 
} 


.dropdownmenu{ 
    border:none; 
    border:0px; 
    margin:0px; 
    padding:0px; 
    font: 37.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; 
    font-size:14px; 
    font-weight:bold; 
    color:#ffffff; 
    } 
.dropdownmenu ul{ 
    background:#333333; 
    height:35px; 
    list-style:none; 
    margin:0; 
    padding:0; 
    } 
    .dropdownmenu li a.top_link span {color:#ffffff;font-size:11px;} 

    .dropdownmenu li{ 
    color: #FFFFFF; 
    font-size:11px; 
     float:left; 
     padding:0px; 
     } 
    .dropdownmenu li a{ 
     background:#333333 url("dropdown/seperator.gif") bottom right no-repeat; 
     color:#ffffff; 
     display:block; 
     font-weight:normal; 
     line-height:35px; 
     margin:0px; 
     padding:0px 11px; 
     text-align:center; 
     text-decoration:none; 
     } 
     .dropdownmenu li a:hover{ 
      background: #2580a2 url("dropdown/hover.gif") bottom center no-repeat; 
      color:#FFFFFF; 
      text-decoration:none; 
      } 
    .dropdownmenu li ul{ 
    color:#ffffff; 
    font-size:10px; 
     background:#333333; 
     display:none; 
     height:auto; 
     padding:0px; 
     margin:0px; 
     border:0px; 
     position:absolute; 
     width:auto; 
     z-index:200; 
     /*top:1em; 
     left:0;*/ 
     } 
    .dropdownmenu li:hover ul{ 
     display:block; 
     float:left; 
     } 
    .dropdownmenu li li { 
     background:url('dropdown/sub_sep.gif') bottom left no-repeat; 
     display:block; 
     float:none; 
     margin:0px; 
     padding:0px; 
     width:auto; 
     } 

    .dropdownmenu li ul a{ 
     display:block; 
     height:35px; 
     font-size:12px; 
     color:#ffffff; 
     font-style:normal; 
     margin:0px; 
     padding:0px 10px 0px 17px; 
     text-align:left; 
     } 

     .dropdownmenu li ulli a:hover{ 
     display:block; 
      background:#2580a2; 
      color:#ffffff; 
      text-decoration:none; 
      } 

Вот код PHP, я использовал <?include ('dropdown.php')?> на моем сайте, чтобы включить это в CMS встроенный веб-сайт.

<link rel="stylesheet" href="dropdown/dropdown3.css" type="text/css" /> 
<ul class="dropdownmenu"> 
    <li ><a href="?category_id=140" class="top_link"><span>Home & Garden <img src="dropdown/down.gif"></span></a> 
    <ul class="sub"> 
     <li><a href="?category_id=145">ArtWork</a></li>   
     <li><a href="?category_id=146">Bedding & Bath</a></li> 
     <li><a href="?category_id=150">Kitchen & Dining</a></li> 
     <li><a href="?category_id=151">Patio, Lawn & Garden</a></li> 
     <li><a href="?category_id=152">Pet Supplies</a></li> 
     <li><a href="?category_id=153">Sewing, Craft & Hobbies</a></li> 
     <li><a href="?category_id=154">Vacuum, Cleaning & Storage </a></li> 
    </ul> 
    </li> 
</ul> 

Что еще я могу сделать, чтобы исправить это в IE?

Кроме того, когда выпадающее меню зависло, он отображает цвет фона # 2580a2, который можно увидеть на .dropdownmenu li a:hover. Эта особенность не отображается в хроме. Что может быть причиной?

+0

Вы могли бы хотеть, чтобы получить возможность отправлять больше кода, так как это не кажется полным. См. Здесь: http://jsfiddle.net/sRqJ8/ (единственное отличие в том, что я завернул внешний список с помощью UL) –

+0

http://jsfiddle.net/sRqJ8/3/. Я обновил его. Но я не могу получить синий фон в раскрывающемся списке для работы в хроме? –

+1

Я изменил '.dropdownmenu li ulli a: hover' на' .dropdownmenu li ul li: hover', чтобы исправить зависание в Chrome. См. Http://jsfiddle.net/HRSSF/. Меню также работает в IE8 – jao

ответ

0

Использование представления совместимости с Internet Explorer на этом веб-сайте может помочь отобразить его правильно. Попробуй.

0

Я использую jQuery Dropdown для этого без ошибок в любом браузере.

Если ваше меню будет хорошо работать Проводник совместимости как «Sagotharan» предложил вы можете переопределить IE рендеринга, установив его, чтобы сделать, как IE7 всегда, как так

<meta http-equiv="X-UA-Compatible" content="IE=7" /> 
Смежные вопросы