Html Div未正确显示为导航的子菜单

现在导航在全屏显示时并不像本例中显示的那样，但在chrome上的iPad模式下显示正确，所以就我而言，这是可行的

我已经完全做了一个子菜单，弹出从顶部导航之前，但无论什么原因，这一个让我难堪

首先我想好了！您需要更改

hoverableMenu{position:absolute}

和
可悬停{position:relative}

维奥拉，我就完蛋了。然而，无论我做什么，当我有
float:left时，它要么一直向左走即使我想，我也可以用边距硬编码头寸，但这不是一个优雅的解决方案，而且我知道，老实说，这只是一个掠过我头上的东西

非常感谢您的帮助

下面是我的最小可验证示例


函数myFunction（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
}
正文{
边际：0px；
背景颜色：浅蓝色；
身高：100%；
}
标题{
/*这是标题图片背景*/
背景大小：100%；
背景图片：url（参考资料/chem3D.png）；
背景重复：无重复；
/*vh=视图高度。当百分比似乎不起作用时，用于代替百分比。这基本上是30%，但实际上不是
https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh-vw-and */
最小高度：100%；
}
/*将标题与内容分开*/
#分离器{
高度：10px；
背景色：黑色；
保证金：0；
填充：0；
}
/*网站的主要内容。Flex魔法发生的地方*/
#内容{
显示器：flex；
保证金：自动；
高度：自动；
}
/*导航资料*/
导航{
宽度：200px；
}
托普纳夫先生{
溢出：隐藏；
}
/*导航中的链接样式*/
/*添加了左浮动*/
.topnav a{
浮动：左；
显示：块；
颜色：黑色；
文本对齐：居中；
填充：10px 5px 10px 15px；
文字装饰：无；
字体大小：1.2米；
字母间距：0.1米；
}
/*下拉菜单*/
a、 可悬停：焦点+div.hoverable菜单{
显示：块；
浮动：左；
}
a、 可悬停：悬停{
颜色：黑色；
}
div.hoverableMenu{
显示：无；
宽度：70%；
左边距：自动；
右边距：10px；
}
div.hoverableMenu>a{
字母间距：0em；
}
div.hoverableMenu：焦点{
显示：块；
}
/*移动视图*/
/*平板电脑视图*/
@媒体屏幕和屏幕（最大宽度：900px）{
#分离器{
显示：无；
}
#内容{
身高：100%；
显示器：flex；
柔性包装：包装；
}
导航{
宽度：100%；
弹性基准：100%；
}
.topnav a{
浮动：左；
}
主要{
宽度：50%；
}
标题{
显示：无；
}
}
您必须将您的结构稍微更改为
ul li
，检查下面的代码


函数myFunction（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
}
正文{
边际：0px；
背景颜色：浅蓝色；
身高：100%；
}
标题{
/*这是标题图片背景*/
背景大小：100%；
背景图片：url（参考资料/chem3D.png）；
背景重复：无重复；
/*vh=视图高度。当百分比似乎不起作用时，用于代替百分比。这基本上是30%，但实际上不是
https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh-vw-and */
最小高度：100%；
}
/*将标题与内容分开*/
#分离器{
高度：10px；
背景色：黑色；
保证金：0；
填充：0；
}
/*网站的主要内容。Flex魔法发生的地方*/
#内容{
显示器：flex；
保证金：自动；
高度：自动；
}
/*导航资料*/
导航{
宽度：200px；
}
托普纳夫先生{
溢出：隐藏；
}
/*导航中的链接样式*/
/*添加了左浮动*/
.topnav a{
浮动：左；
显示：块；
颜色：黑色；
文本对齐：居中；
填充：10px 5px 10px 15px；
文字装饰：无；
字体大小：1.2米；
字母间距：0.1米；
}
/*下拉菜单*/
a、 可悬停：焦点+div.hoverable菜单{
显示：块；
浮动：左；
}
a、 可悬停：悬停{
颜色：黑色；
}
div.hoverableMenu{
显示：无；
宽度：70%；
左边距：自动；
右边距：10px；
}
div.hoverableMenu>a{
字母间距：0em；
}
div.hoverableMenu：焦点{
显示：块；
}
/*//////////*/
托普纳夫先生{
溢出：可见；
}
.topnav>li{
浮动：左；
列表样式类型：无；
}
李托普纳夫先生{
列表样式类型：无；
填充：0；
位置：相对位置；
}
.topnav>li>ul{
显示：无；
保证金：0；
位置：绝对位置；
左：0；
填充：0；
顶部：40px；
}
.topnav>li:悬停>ul{
显示：块；
}
李托普纳夫先生{
}
.托普纳夫：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
/*//////////*/
/*移动视图*/
/*平板电脑视图*/
@媒体屏幕和屏幕（最大宽度：900px）{
#分离器{
显示：无；
}
#内容{
身高：100%；
显示器：flex；
柔性包装：包装；
}
导航{
宽度：100%；
弹性基准：100%；
}
.topnav a{
浮动：左；
}
主要{
宽度：50%；
}
标题{