任何人都可以告诉我为什么这个导航应该做的除了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;
}