CSS：子菜单在 IE 7,8 和 9 中不起作用

Question

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

这是菜单的 HTML 代码

<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 代码。

@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

我设法通过将 clear:left 属性添加到 .suckertreemenu ul li ul li 属性来解决它

/*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;**

}