Question

我制作了一个基于Skeleton Framework的HTML页面，并试图添加带有子菜单的css菜单。菜单工作正常，但我在IE7中遇到了子菜单问题。除IE7及更低版本外，子菜单无处不在。子菜单不会显示在发布的菜单项下面，而是显示在菜单项中间的菜单项旁边。

这是我的代码：

HTML：

<ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Education</a>

                    <ul>        
                        <li><a href="#">Courses</a></li>
                        <li><a href="#">CV</a></li>
                    </ul>


                </li>
                <li><a href="#">Example</a></li>
</ul>

CSS代码：

nav.primary ul ul {
position: absolute;
z-index: 999;
background: #000;
min-width:100%;

height:0px;
overflow: hidden; 

-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
}

nav.primary ul li:hover ul{
height:auto;
overflow: auto; 
}
nav.primary ul ul li{
float:none; 
display: list-item; /*list-item*/
border-bottom: 1px solid #383737;
width:auto;

}

nav.primary ul ul li a{
display:block;
line-height: 35px;
text-transform: none; 

}

任何帮助将不胜感激。

Answer 1

尝试添加：

nav.primary ul ul {
    left:0;
    top:0;
}

如果这没有帮助，请上传样本或创建一个jsFiddle .. thx ...

或者你可以改变顶部：0;进入顶部：100％;强行降低100％，将其定位在菜单下方。

骨架页面css子菜单ie7

1 个答案: