0

我基于 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; 

}

任何帮助，将不胜感激。

4

1 回答 1

0

尝试添加：

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

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

或者，您可以更改 top:0; 进入顶部：100%；强制它 100% 下降，将其放置在菜单的正下方。

于 2013-09-21T17:07:00.460 回答