Question

这是我的问题。一切都在工作，除了ie7（当然）。下拉菜单不显示。

有人知道解决方法吗？仅供参考，doctype已设定。（如果有人问）

这是我最后的代码......

感谢您的帮助

<ul class="menu">
            <li class="subMenu">
                <a style='clear: left;' id='jiraMenu' href="#">JIRA</a>
                <ul>
                    <li><a href = "#">Make a request</a></li>  
                    <li><a href="#" >View the version</a></li>  <!--"https://caedsh03.caecorp.cae.com/secure/StructureBoard.jspa?s=173" !-->
                </ul>
            </li>

            <li>
                <a href="#" name="language" >En</a>
            </li>
        </ul>

CSS

.menu {
    margin:0;
    padding:0;
    border-collapse:collapse;
}

.menu li {
    list-style:none;
    float: left;
}

.menu li a:link, .menu li a:visited {
    display:block;
    text-decoration:none;
    background-color:#10509e;
    padding: 0.5em 2em;
    margin:0;
    border-left: 1px solid #fff;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
        color:white;
}

.menu li a:hover {
    background-color:white; 
    color: #10509e;
    outline:1px solid black;
}

/*style the sub menu*/
.menu li ul {
    position:absolute;
    display: none;
    border-top:1px solid #fff;
    margin:0;
    padding:0;
    z-index: 999;
}

.menu li ul li {
    display:inline;
    float:none;
    width: 100%;
}

.menu li ul li a:link, .menu li ul li a:visited {
    background-color:#10509e;   
    color: white;
    width:auto;
}

.menu > li:hover ul {
    display: block;
    display: table-cell;
}

.menu li ul li a:hover {
    background-color:white; 
    color: #10509e;
}

Answer 1

IE7不支持

display: table-cell。删除它应该可以解决问题。

http://jsbin.com/ugIfAJi/1

ie7问题中的CSS下拉菜单

1 个答案: