Раскрывающееся меню исчезает в IE8 - PullRequest
3 голосов
/ 10 июля 2010

Я работаю над выпадающим меню, которое исчезает в IE 8. Отлично работает в Firefox и Chrome, но не в IE8. я гуглил два дня и сделал много изменений, но все еще не работает в IE. Вот код для CSS.

.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 Эта конкретная вещь не отображается в Chrome. В чем может быть причина?

Ответы [ 2 ]

0 голосов
/ 01 июня 2011

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

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

<meta http-equiv="X-UA-Compatible" content="IE=7" />
0 голосов
/ 01 июня 2011

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

...