Html css二级下拉列表消失

我的问题是，当我移动光标时，Html/Css下拉菜单第二级消失，目前在Iphone上的Safari上运行良好，但我没有尝试过其他浏览器

这似乎与CSS中的宽度有关，如果我设置了一个固定的px值，那么所有的功能似乎都正常，但并不是所有屏幕都能正确地重新设置

所有参数均以%为基础贯穿整个站点，目前为止，该参数在跨平台运行良好

。第三级菜单{
位置：绝对位置；
排名：0；
宽度：自动；
列表样式：无；
填充：0；
保证金：0；
显示：无；
}
.第三级菜单>li{
高度：30px；
背景：#FFF；
}
.第三级菜单>li:悬停{
背景：#FFF；
}
.二级菜单{
位置：绝对位置；
顶部：30px；
左：0；
高度：自动；
宽度：自动；
列表样式：无；
填充：0；
保证金：0；
显示：无；
z指数：100；
}
.第二级菜单>li{
位置：相对位置；
高度：自动；
背景：#FFF；
宽度：自动；
}
.第二级菜单>li:悬停{
背景：#FFF；
}
.顶级菜单{
列表样式：无；
填充：0；
保证金：0；
}
.顶级菜单>li{
位置：相对位置；
浮动：左；
高度：自动；
宽度：自动；
}
.top-level菜单>.style4{
浮动：左；
高度：自动；
位置：相对位置；
宽度：自动；
填充顶部：0px；
右边填充：10px；
垫底：10px；
左侧填充：10px；
}
.顶级菜单>li:悬停{
背景：#FFF；
}
.顶级菜单li:悬停>ul{
/*悬停时，显示下一级菜单*/
显示：内联；
空白：nowrap；
}
.顶级菜单a{
字体：粗体14px Arial，Helvetica，无衬线；
颜色：#093；
文字装饰：无；
填充：0 10px；
显示：块；
线高：自动；
}
.顶级菜单a：悬停{
颜色：#3F6；
空白：nowrap
}
.顶级菜单a{
颜色：#093；
空白：nowrap
}

//






//





//

//




//

//

您的主菜单和二级菜单之间存在间隙。因此，您的悬停效果不再存在。要检查，请尝试此代码

.top-level-menu > li > a { border: 1px solid blue; }
.second-level-menu { border: 1px solid red; }

解决这个问题

.top-level-menu > li > a { padding:8px 0px; }

---

从

中删除
top:30px
。二级菜单将解决此问题。

如果您想在主菜单和第二级菜单之间留出一些间隙。您可以通过添加下面给定的css，对第一个菜单选项进行一些填充-

.second-level-menu > li:first-child {
  padding-top: 10px;
}


。第三级菜单{
位置：绝对位置；
排名：0；
宽度：自动；
列表样式：无；
填充：0；
保证金：0；
显示：无；
}
.第三级菜单>li{
高度：30px；
背景：#FFF；
}
.第三级菜单>li:悬停{
背景：#FFF；
}
.二级菜单{
位置：绝对位置；
左：0；
高度：自动；
宽度：自动；
列表样式：无；
填充：0；
保证金：0；
显示：无；
z指数：100；
}
.第二级菜单>li{
位置：相对位置；
高度：自动；
背景：#FFF；
宽度：自动；
}
.第二级菜单>li:悬停{
背景：#FFF；
}
.顶级菜单{
列表样式：无；
填充：0；
保证金：0；
}
.顶级菜单>li{
位置：相对位置；
浮动：左；
高度：自动；
宽度：自动；
}
.top-level菜单>.style4{
浮动：左；
高度：自动；
位置：相对位置；
宽度：自动；
填充顶部：0px；
右边填充：10px；
垫底：10px；
左侧填充：10px；
}
.顶级菜单>li:悬停{
背景：#FFF；
}
.顶级菜单li:悬停>ul{
/*悬停时，显示下一级菜单*/
显示：内联；
空白：nowrap；
}
.顶级菜单a{
字体：粗体14px Arial，Helvetica，无衬线；
颜色：#093；
文字装饰：无；
填充：0 10px；
显示：块；
线高：自动；
}
.顶级菜单a：悬停{
颜色：#3F6；
空白：nowrap
}
.顶级菜单a{
颜色：#093；
空白：nowrap
}



//






//





//

//




//

//