Question

任何人都可以告诉我为什么这个导航应该做的除了IE9之外应该做的事情以及我如何解决这个问题。

该项目需要与IE9兼容。

这在IE11中运行良好

这是我的代码。感谢。

HTML

                    <li> <a href="#"> Tills </a>
                    <ul>
<li><a href="#">Base Unit</a></li>
<li><a href="#">Card Reader</a>
        <ul id="secondMenu" onclick="navClick()">
                <li><a href="file:///C|/Users/Jack.Jack-PC.000/Desktop/screen121.html" id="screen1211" onClick="changeFrame(this.href); return false;">Not Reading Cards</a></li>
        <ul></li>
        </ul></li></ul>
<li><a href="#">Cash Drawer</a></li>
<li><a href="#">Customer Display</a></li>
<li><a href="#">Reciept Printer</a>
        <ul id="secondMenu" onclick="navClick()">
                <li><a href="file:///C|/Users/Jack.Jack-PC.000/Desktop/screen1511.html" id="screen1511" onClick="changeFrame(this.href); return false;"> Printing with blank areas </a></li>
        <ul></li>
        </ul></li></ul>
<li><a href="#">Scanner</a>
<li><a href="#">Touchscreen</a>
    <ul id="secondMenu" onclick="navClick()">
                <li><a href="file:///C|/Users/Jack.Jack-PC.000/Desktop/screen1.html" id="screen1" onClick="changeFrame(this.href); return false;">Black or faint pictiure</a></li>
                <li><a href="file:///C|/Users/Jack.Jack-PC.000/Desktop/screen2.html" onClick="changeFrame(this.href); return false;">Distorted or fuzzy display</a></li>
    </ul>
    </li>
</ul>
</li>
                    <li> <a href="#">Self Check Out</a></li>
                    <li> <a href="#">Controller</a></li>
                    <li>  <a href="#">Photo</a></li>
                    <li> <a href="#">iPads </a>
                <ul id="secondMenu" onclick="navClick()">
                <li><a href="file:///C|/Users/Jack.Jack-PC.000/Desktop/screen511.html" id="screen511" onClick="changeFrame(this.href); return false;"> Not connecting to BUK Corporate </a></li>
        <ul></li>
        </ul></li></ul>

                    <li> <a href="#"> Handhelds</a></li>
                    <li>  <a href="#">Personal Computing</a></li>
                    <li>  <a href="#">Printing</a></li>
                        <li>  <a href="#">Password Resets</a></li>
                    <li>  <a href="#">Other</a></li>

                </ul>

              </nav>

这是CSS

nav {
    display:block;
    margin:8px 0px 10px 0px;
    padding:0;
    border-radius:10px;
    text-align:center;
    width:15.6%;
    font-weight: 4000;
    float:left;
    z-index:999;
}

nav ul ul {
    display: none;
}

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


nav ul{
list-style:none;
background:#5e6ea6;
}


nav ul li {
    position:relative;
    text-align:center;
    border:4px solid #2f4389;
    color:#FFF;
    z-index:98; 
    font-size: 118%;
}


nav ul li a{
    text-decoration:none;
    color:white;
    display:block;
    background:#5e6ea6;
    padding-bottom:7.9%;    
    padding-top:7.9%;
}


nav ul li:hover > a{
    background-color:orange;
    display: block;
}


nav ul ul{
    position:absolute;
    display:none;
}


nav ul ul {
    background: #5f6975;
    border-radius: 0px; 
    padding: 0;
    position: absolute; 
    top: 100%;
    font-weight: 4000;
    font-size: 70%;
}

nav ul ul li {
    float: none; 
    border-top: 1px solid #2f4389 ;
    border-bottom: 1px solid #2f4389;
    position: relative;
    width:275px;    
}

nav ul ul li a {
    padding: 15px 40px;
    color: #fff;
}   

nav ul ul li:hover > a {
    background: orange;
    border:1px solid white;
}


nav ul li:hover ul{
    width:100%;
    position:absolute;
    left:100%;
    top:0;
}

为什么我的导航在IE9中无法正确呈现

0 个答案: