在我为高中篮球队工作的网站上,某些元素在Internet Explorer中不起作用。该网站是hermantownbasketball.com。男子篮球侧边栏应该有嵌套的下拉菜单,一个是鼠标悬停在团队之上,例如“高中”,然后是另一个当你将鼠标放在团队下等级时,例如9年级。这在chrome中运行得非常好,但是,我无法在任何版本的Internet Explorer中使用它。下面是html的一部分以及我正在使用的相应CSS。
不幸的是,我不知道足够的CSS知道我的代码IE不喜欢哪个部分或者如何解决它。
非常感谢任何帮助!
<span class = "boyItem">
<h3>High School</h3>
<li class="group">
<h4>9th Grade</h4>
<div class = "nested">Schedule</div>
<div class = "nested">Events</div>
<div class ="nested">Forms</div>
<div class ="nested">Calendar</div>
</li>
<li class="group">
<h4>JV/Varsity</h4>
<div class = "nested">Schedule</div>
<div class = "nested">Events</div>
<div class = "nested">Forms</div>
<div class = "nested">Calendar</div>
</li>
</span>
/* Creates the box around the title for each boy section. */
.boyItem h3 { background:#1C23E8;
color:#EFFA20;
padding-right:2px; padding:10px;
font-size:18px;
margin-left:-30px;
margin-top:-10px;
}
###CSS
.boyItem h3:hover { background:#2A8FF5; }
/* Prevents the boy sub-sections from being visable */
.boyItem li h4 { position: absolute; left:-9999px; font-size:15px; list-style-type:none;}
/* Shows the boy sub-sections when user mouses over the section title. */
.boyItem:hover li h4 {
position:relative;
left:10px;
background:#1C23E8;
color:#EFFA20;
padding-left:20px;
padding:5px;
}
.boyItem:hover li h4:hover { background:#2A8FF5;}
.nested { position:absolute;
left:-9999px;
background:#352EFF;
color:#EFFA20;
padding-right:2px;
padding:4px;
font-size:14px;
margin:2px;
margin-left:30px;
margin-top:0px;
margin-right:0px;
margin-bottom:-2px;}
.group:hover .nested {position:relative; left:0px; }
.group:hover .nested:hover { background:#2A8FF5}
答案 0 :(得分:0)
众所周知,Internet Explorer使用独特的方法(实际和事实上)标准。
给this library一个机会。不能保证它能解决任何问题,但绝对值得一试。