CSS：子菜单不工作在IE 7,8和9

Question

我在网站上创建了子菜单，但是当我将鼠标放在父链接上时，子菜单水平显示而不是垂直显示。他们在Chrome和Firefox中运行良好。

下面是菜单

<div class="suckertreemenu"> 
       <ul> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">About Us</a> 
        <ul> 
         <li><a href="#"> Overview</a></li> 
         <li><a href="#"> What do we deliver? </a></li> 
         <li><a href="#"> Our People</a> 
         <ul> 
          <li><a href="#"> Management</a></li> 
          <li><a href="#"> Consultants</a></li> 
         </ul> 
         </li> 
         <li><a href="#">What is it like working with us?</a></li> 
        </ul> 
        </li> 
        <li><a href="#">Solutions</a> 
        <ul> 
         <li><a href="#">Business Model</a> 
         <ul> 
          <li><a href="#">Business Consulting</a></li> 
          <li><a href="#">Technology Consulting</a></li> 
          <li><a href="#"> Managed Services Consulting</a></li> 
         </ul> 
         </li> 
         <li><a href="#">Modus Operandi</a></li> 
        </ul> 
        </li> 
        <li><a href="#">Industries</a></li> 
        <li><a href="#">Alliances</a></li> 
        <li><a href="#">News</a></li> 
        <li><a href="#">Contact Us</a></li> 
       </ul> 
       </div> 

这里是我下面的CSS代码的HTML代码。

@charset "utf-8"; 
/* CSS Document */ 
Body{ 
    margin:0; 
    padding:0; 
    background-color:#DCDCDC; 
    color:#000; 
    font-family: Arial, Helvetica, sans-serif; 
    /*font-size:12px;*/ 

} 
.bodytext{ 
    font-size:12px; 
} 
H1{ 
font-family:Arial, Helvetica, sans-serif; 
font-size:14px; 
font-weight:bold; 
color:#000000; 
background-image:url(../images/welc_image.jpg); 
background-position:left; 
background-repeat:no-repeat; 
padding-left:12px; 
} 
P{ 
font-size:12px; 
} 
h3{ 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size:11px; 
font-weight:bold; 
color:#000000; 
border-bottom:#FF0000 solid 1px; 
padding:5px 5px 5px 5px; 
} 
.btext{ 
font-size:12px; 
} 
H2 a:link{ 
font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 
font-weight:bold; 
color:#666666; 
background-image:url(../images/news_image.jpg); 
background-position:left; 
background-repeat:no-repeat; 
padding-left:12px; 
} 
H2 a:visited{ 
font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 
font-weight:bold; 
color:#666666; 
background-image:url(../images/news_image.jpg); 
background-position:left; 
background-repeat:no-repeat; 
padding-left:12px; 
} 
H2 a:active{ 
font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 
font-weight:bold; 
color:#666666; 
background-image:url(../images/news_image.jpg); 
background-position:left; 
background-repeat:no-repeat; 
padding-left:12px; 
} 
H2 a:hover{ 
font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 
font-weight:bold; 
color: #FF0000; 
background-image:url(../images/news_image.jpg); 
background-position:left; 
background-repeat:no-repeat; 
padding-left:12px; 
} 
H2 { 
font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 
font-weight:bold; 
color:#666666; 
background-image:url(../images/news_image.jpg); 
background-position:left; 
background-repeat:no-repeat; 
padding-left:12px; 
} 
.ik img { 
    background: #ebebeb; 
    border: solid 1px #d1d1d1; 
    padding: 5px; 
} 
#nav{ 

    background-image: url(../images_v2/bg_grad_02.gif); 
} 
li{ 
list-style-image: url(../images/bullet2.gif); 
font-size:12px; 
list-height:30px; 
} 
.ContactUS 
{ 

    color: #FFF; 
} 
.footer 
{ 
    font-size:11px; 
    color: #000; 
} 
.businessText { 
    font-size: 12px;font-size:12px; 
    color: #FFF; 
    font-weight:bold 
} 

.searchText { 
    font-size: 12px; 
    color: grey; 
} 
.partners { 
    text-align: center; 
    color:#000; 
    font-size: 12px; 
} 

.Block_Headers { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    color: #D9D9D9; 
} 


.searchBox{ 
background:url(../images_v2/tboxfill.gif) 
} 

.suckertreemenu ul{ 
margin: 0; 
padding: 2px 0 0 0; 
float: left; 
font: 14px Arial; 
text-align:left; 
height:29px; 
z-index:100; 
} 

/*Top level list items*/ 
.suckertreemenu ul li{ 
position: relative; 
display: inline; 
float: left; 

/*background-color: #F3F3F3;*/ /*overall menu background color*/ 
} 

/*Top level menu link items style*/ 
.suckertreemenu ul li a{ 
float: left; 
color: white; 
padding: 5px 11px; 
text-decoration: none; 
background:url(../images_v2/navsplit.gif) no-repeat scroll right center transparent;/*Place right border image here*/ 
font: 14px Arial; 
} 
.suckertreemenu ul li a:link{ 
float: left; 
color: white; 
padding: 5px 11px; 
text-decoration: none; 

} 
.suckertreemenu ul li a:visited{ 
float: left; 
color: white; 
padding: 5px 11px; 
text-decoration: none; 

} 
.suckertreemenu ul li a:active{ 
float: left; 
color: white; 
padding: 5px 11px; 
text-decoration: none; 
border-right: 1px solid white; 
background-color: #BD0021; 
} 

/*1st sub level menu*/ 
.suckertreemenu ul li ul{ 
    left: 0; 
    position: absolute; 
    top: 1em; /* no need to change, as true value set by script */ 
    display: block; 
    visibility: hidden; 
    font: normal 13px Arial; 

} 

/*Sub level menu list items (undo style from Top level List Items)*/ 
.suckertreemenu ul li ul li{ 
    display: list-item; 
    list-style:none; 
    float: left; 
top: 14px; 

} 

/*All subsequent sub menu levels offset after 1st level sub menu */ 
.suckertreemenu ul li ul li ul{ 
    left: 159px; /* no need to change, as true value set by script */ 
    top: -16px; 
} 

/* Sub level menu links style */ 
.suckertreemenu ul li ul li a{ 
    display: block; 
    width: 160px; /*width of sub menu levels*/ 
    text-decoration: none; 
    background-color: #31458C; 
    color: white; 
    /*font-weight:normal;*/ 
    padding: 10px 11px; 
    border-top: 1px solid white; 
    border-right: 1px solid ; 
    border-left: 1px solid ; 
    background:none; 

} 
.suckertreemenu ul li ul li a:link{ 
    display: block; 
    width: 160px; /*width of sub menu levels*/ 
    text-decoration: none; 
    background-color: #31458C; 
    color: white; 
    /*font-weight:normal;*/ 
    padding: 5px 11px; 
    border-top: 1px solid white; 
    border-right: 1px solid ; 
} 
.suckertreemenu ul li ul li a:visited{ 
    display: block; 
    width: 160px; /*width of sub menu levels*/ 
    text-decoration: none; 
    background-color: #31458C; 
    color: white; 
    /*font-weight:normal;*/ 
    padding: 5px 11px; 
    border-top: 1px solid white; 
    border-right: 1px solid ; 
} 
.suckertreemenu ul li ul li a:active{ 
    display: block; 
    width: 160px; /*width of sub menu levels*/ 
    text-decoration: none; 
    background-color: #31458C; 
    color: white; 
    /*font-weight:normal;*/ 
    padding: 5px 11px; 
    border-top: 1px solid white; 
    border-right: 1px solid ; 
} 
.suckertreemenu ul li ul li a:hover{ 
    background-color: #BD0021; 
    color: white; 
    border-bottom: none; 
    /*font-weight:normal;*/ 

} 

#current{ 
    border-bottom:#AA0B34 solid 3px; 
    color: white; 

} 


.suckertreemenu ul li a:hover{ 

    color: red; 
} 

.suckertreemenu ul li a:active{ 
border-bottom:#BD0021 solid 3px; 
color: white; 
/*font-weight:normal;*/ 

} 


/*Background image for subsequent level menu list links */ 
.suckertreemenu .subfoldericon{ 
background: #31458C url(../images_v2/arrow-right.gif) no-repeat center right; 
} 

* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/ 
padding-top: 1em; 
} 

/* Holly Hack for IE \*/ 
* html .suckertreemenu ul li { float: left; height: 1%; } 
* html .suckertreemenu ul li a { height: 1%; } 
/* Holly Hack for IE \*/ 
* html .suckertreemenu ul li ul li { float: left; height: 1%; } 
* html .suckertreemenu ul li ul li a { height: 1%; } 
/* End */ 
/* End */ 

Answer 1

爵士，

您在UL的可见性设置为隐藏，但你不改变其状态恢复到悬停可见的，这就是为什么你永远看不到你的子菜单。

放在下面的CSS：

.suckertreemenu ul li:hover ul { 
    visibility: visible; 
} 

而且，你个子项目，因为它们被设置为浮动水平显示：留在你的CSS。

.suckertreemenu ul li ul li { 
list-style:none; 
float: left; <------ reset this style! 
top: 14px; 

}

我希望帮助

Answer 2

我设法通过增加明确解决这个问题：离开 atrribute到.suckertreemenu UL李UL李财产

/*Sub level menu list items (undo style from Top level List Items)*/ 
.suckertreemenu ul li ul li{ 
    display: list-item; 
    list-style:none; 
    float: left; 
    top: 14px; 
    **clear:left;** 

}