我真的很讨厌这样直接问一个问题,但我一直在试图弄清楚为什么左侧的子导航(悬停在“关于我们”上)几个小时内不会出现在 IE 中,而且我无法重现问题在小提琴中:-/ 这是网站:http:
//quinnhr.adsinchosting5.com/
更新绝对看那个^网站上的代码,因为为了简洁起见,这只是我认为问题所在的一个片段。/update
这是 html 和 css 的片段:
<nav> <!-- left sidebar -->
<ul>
<li>
<a href="#"> Capabilities </a>
</li>
<li>
<a href="#"> Pricing </a>
</li>
<li>
<a href="#">About Us</a>
<ul id="subNizzle"> <!-- this UL is the issue, see css -->
<li class="subNav">
<a href="#">someone's name</a>
</li>
<li class="subNav">
<a href="#">some else's name</a>
</li>
<li class="subNav">
<a href="#">another name</a>
</li>
</ul>
</li>
CSS ***是的,我知道没有设置显示,jquery 代码在悬停时覆盖它,请参阅 quinnhr.adsinchosting5.com 获取代码。关闭
section aside: first-of-type ul li a{
display:table-cell;
}
至少使子导航显示出来,但它显示在现有导航的顶部,并通过以下方式将其向右移动:
section aside:first-of-type ul li a{
position: absolute;
}
section aside:first-of-type ul li ul{
position: absolute;
right:-100px;
z-index: 1000;
}
将其向右移动到足以显示并说明它被隐藏在导航之外...
section aside:first-of-type ul {
display: table;
margin-left: 70px;
margin-top: 25px;
padding: 0px;
position: absolute; }
section aside:first-of-type ul li {
display: table;
height: 45px;
position: relative;
width: 180px; }
section aside:first-of-type ul li a {
color: #F0EBDA;
display: table-cell;
height: 45px;
text-decoration: none;
text-indent: 10px;
vertical-align: middle;
position:absolute; /* update */
}
section aside:first-of-type ul li ul {
display: none;
margin: -45px 0px 0px 179px;
padding: 0px;
position:absolute; /* update */
right: -100px; /* update */
}
jQuery:查询(文档).ready(函数($){
$('li a').addClass("nahbro");
$('ul li ul').css({"margin-left": "-10px", "padding" : "0px", "margin-top" : "-45px"});
$('li').hover(function(){
$(this).switchClass("nahbro", "prepare", 400);
$('#subNizzle', this).fadeIn().switchClass("nahbro", "prepare", 300);
$('.subNav').hover(function(){
$(this).switchClass("prepare", "liSelected", 200);
},function(){
$(this).switchClass("liSelected", "prepare", 200);
});
}, function(){
$(this).switchClass("prepare", "nahbro", 400);
$('#subNizzle', this).fadeOut().switchClass("liSelected", "nahbro", 500);
});
我认为它与 display:table / display: table-cell / display: block 链中的某处有关...