Question

我正在尝试在鼠标悬停时实现下拉菜单。它在谷歌浏览器中运行得非常好，但一切都搞砸了IE。请帮助我纠正这些css代码，以便它们在IE中正常工作。

这是我下拉菜单的css代码

.menu ul
{
list-style-type: none;
background-image: url(b.png);
height: 30px;
margin:0;
padding:0
}

.menu ul li
{
float: left;
}

.menu ul li a 
{
background-image: url(../Image/navi_bg_divider.png);
background-repeat: no-repeat;
background-position: right;
padding-right: 3%;
padding-left: 3%;
/*display: block;*/
line-height:25px;
text-decoration: none;
font-family: Tahoma,"Times New Roman",Times,serif;
font-size: 14px;
color:white;


}

.menu ul li a:hover
{
color: silver;
}






nav ul ul {
    display: none;
}

    nav ul li:hover > ul {
        display: block;
    }


nav ul {
    background: #efefef; 
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0 15px;
    border-radius: 10px;  
    list-style: none;
    position: relative;
    display: inline-table;

z-index:1000;
}
    nav ul:after {
        content: ""; clear: both; display: block;
    }


nav ul li {
    float: left;
}
    nav ul li:hover {
        background: #4b545f;
        background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
    }
        nav ul li:hover a {
            color: #fff;
        }

    nav ul li a {
        display: block; padding: 10px 14px;
        color: #757575;

     text-decoration: none;
    font-size:100%; 
    }

nav ul ul {
    background: #5f6975; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
}
    nav ul ul li {
        float: none; 
        border-top: 1px solid #6b727c;
        border-bottom: 1px solid #575f6a;
        position: relative;
    }
        nav ul ul li a {
            padding: 10px 10px;
            color: #fff;
        }   
            nav ul ul li a:hover {
                background: #4b545f;
            }

nav ul ul ul {
    position: absolute; left: 100%; top:0;

这是菜单代码的一部分： -

<div >
<table><tr><td>
<ul id="menu">

<li><a href="#">ACQUISITIONS</a>
            <ul>
                <li><a href="#">EXTERNAL ACQUISITIONS</a>
                    <ul>
                        <li><a href="#">ACQUISITION PROCESS METRICS</a>
    <img src="i.jpg"  class="masterTooltip" title="About APM" />
</li>
                        <li><a href="#">CAMPAIGN TRACKING REPORTS-LEAD MARKETS</a>
<img src="i.jpg" class="masterTooltip" title="About campaign tracking reports" /></li></li>
                        <li><a href="#">DSC(DIGITAL SUB-CHANNEL)</a></li>
                        <li><a href="#">EARLY PERFORMANCE INDICATORS</a></li>
                        <li><a href="#">INTERACTIVE CAMPAIGN RESPONSE TRACKING(iCRT)</a></li>
                        <li><a href="#">INVESTMENT TRACKING</a></li>
                        <li><a href="#">QUARTERLY ROI</a></li>
                        <li><a href="#">ANNUAL ROI</a></li>
                    </ul>
                </li>

                       <li><a href="#">INTERNAL ACQUISITIONS</a></li>
                <li><a href="#">ACQUISITION ADVISOR TOOLKIT</a> </li>
            </ul>


        </li>
        <li><a href="#">BUSINESS ANALYSIS</a>               
            <ul>
                <li><a href="#">PORTFOLIO</a></li>
                <li><a href="#">COMMERCE AND EDS</a></li>
                <li><a href="#">SHARE OF LAYOUT</a></li>
            </ul>
        </li>   
            <li><a href="#">CENTRAL LENDING</a></li>
            <li><a href="#">COMMERCIAL CARD</a></li>
            <li><a href="#">INSURANCE</a></li>          
            <li><a href="#">SBS ANALYSIS</a></li>           
            <li><a href="#">SUPPORT</a>
            <ul>
                <li><a href="#">DATA DICTIONARY</a></li>
                <li><a href="#">REFERENCES</a><img src="i.jpg" class="masterTooltip" title="About references" /></li>
                <li><a href="#">RBI LEARNING SERIES</a><img src="i.jpg" class="masterTooltip" title="About RBI Learning series" /></li>
            </ul>
        </li>   
</ul>
</td></tr></table>
</div>

Answer 1

检查IE打开页面的模式。确保它处于标准模式。如果没有，请将以下内容添加到您的html文件中：

'！DOCTYPE html PUBLIC“ - // W3C // DTD HTML 4.01 // EN” “http://www.w3.org/TR/html4/strict.dtd”'

Answer 2

我能想到的唯一原因是IE可能不支持您正在尝试的事情。我不是跨浏览器支持的专家，所以我希望我能帮到你更多。我希望我的答案能帮助你朝着正确的方向前进！

css在IE 9中不起作用，但在chrome中运行良好

2 个答案: