IE 6和7的错误使第三层导航浮起来

我有问题试图找出为什么我的下拉导航是在他们所设想的在IE 6和IE 7下沉降。任何帮助，你可以给我将为我挽救生命。IE 6和7的错误使第三层导航浮起来

的下拉导航CSS文件

#nav-bar { /*Container Div*/ 
    width: 950px; 
    height: 45px; 
    background-image:url(images/nav-bar-background.jpg); 
    background-repeat: no-repeat; 
    margin: 7px 0 2px 0; 
    z-index:999; 
    position:relative; 
    padding:0; 
} 

/*First Level*/ 
#nav-bar ul { 
    padding: 10px; 
    text-align:center; 
    margin-top: 6px; 
} 

#nav-bar ul li { 
    font-family: Arial, Helvetica, sans-serif; 
    color: #585858; 
    font-size: 14px; 
    display: inline; 
    padding:0 9px 40px 9px; 
    text-align:center; 
} 

#nav-bar ul li a { 
    text-decoration: none; 
    color: #585858; 
} 

/*First Level HOVER*/ 
#nav-bar ul li a:hover { 
    background-image: url(nav.png); 
    background-repeat: repeat-x; 
} 

* html ul#nav-bar li a { 
    height:37px; 
    margin-top:-10px; 
} 

ul#nav-bar>li a:hover, ul#nav-bar>li:hover { 
    background-position:0px -20px; 
    height:37px; 
    text-decoration:none; 
} 

* html ul#nav-bar li a:hover, * html ul#nav-bar li:hover, * html ul#nav-bar li.hover { 
    background-position:0px -20px; 
    height:27px; 
} 

#nav-bar ul ul { 
    background-image:url(images/secondtierbg.gif); 
    display:none; 
} 

#nav-bar ul ul li { 
    width:100px; 
} 

#nav-bar ul ul li a { 
    line-height:26px; 
} 

#nav-bar ul li { 
    font-family: Arial, Helvetica, sans-serif; 
    color: #585858; 
    font-size: 14px; 
    display: inline; 
    padding: 10px 9px 20px 9px; 
    text-align:center; 
} 

#nav-bar ul li a { 
    text-decoration: none; 
    color: #585858; 
} 

#nav-bar li:hover ul, #nav-bar li.hover ul { 
    display:inline; 
    position:absolute; 
    left:0; 
    top:44px; 
    width:950px; 
    height:26px; 
    margin:0 auto; 
    padding: 0; 
    z-index:200; 
} 

* html #nav-bar li.hover ul { 
    height:37px; 
} 

/* 
#nav-bar li:hover li { 
    list-style:none; 
    display:inline; 
    color:#fff; 
    margin:5px 0px 0 20px; 
    padding:0; 
} 
*/ 

#nav-bar li:hover li a, #nav-bar li.hover li a { 
    color:#fff; 
    font-size:12px; 
    font-family:Arial, Helvetica, sans-serif; 
    text-align:center; 
    margin-top: 10px; 
    padding: 5px; 
    text-decoration:none; 
} 

#nav-bar li:hover li a:hover { 
    background:none!important; 
} 

/* THIS IS FOR DROP DOWNS */ 

#nav-bar ul ul ul { 
    visibility: hidden; 
    background-image: none; 
    display: block; 
    margin: 0px; 
    padding: 0px; 
    list-style: none; 
} 

#nav-bar ul ul ul li { 
    display: block; 
    width:100px; 
    height: auto; 
    font-family: Arial, Helvetica, sans-serif; 
    color:#FFF; 
    font-size: 11px; 
    background-color:maroon; 
    border-style: solid; 
    border-color: white; 
    border-width: 1px 1px 0 1px; 
    padding: 5px 0; 
    float: none; 
    clear: both; 
} 

#nav-bar ul ul #firstrange li { 
    width:100px; 
} 

#nav-bar ul ul ul li:last-child { 
    border-bottom: 1px solid white; 
    /*background:transparent;*/ 
} 

#nav-bar ul ul ul li a{ 
    cursor:pointer; 
    line-height:14px; 
} 

#nav-bar ul ul li:hover ul { 
    visibility: visible; 
    left:0; 
    position:absolute; 
    margin-top:0; 
    top:31px; 
    z-index:220; 
} 

#nav-bar ul ul li:hover { 
    position:relative; 
}

的链接是：

http://www.paysonsecure.com/colonialwarsct/

来源

2011-04-21 user719516

停止支持IE6。 – Marwelln 2011-04-21 21:12:07

笔记/咨询/问题：

想想你怎么能使这项工作分两个层次。我有困难试图让第二级显示在IE中（你可能也想工作）。
考虑有一个垂直的子菜单。用户导航更容易。
问题。每年有多少内容要去？如果没有太多，也许你可以分组内容。

我重新调整了导航的CSS我认为它是一个好的开始 - 如果你愿意。 http://jsfiddle.net/EvRem/1/

希望这是有道理的

来源

2011-04-21 21:32:28 gutierrezalex

IE 6和7的错误使第三层导航浮起来

回答

相关问题