Html 无溢出的浮动多级顶部导航

我重新创建了网站的顶部导航@（请参见下面的代码）

我希望它是：

• 固定到浏览器视口的顶部
• 具有下拉列表的多级
• 顶层不会在较小的桌面屏幕上溢出

将overflow设置为hidden on#navigationcss会停止溢出，但也会终止下拉列表

当它被移除时，下拉列表会返回，但也会溢出

有没有办法实现一个多电平的固定顶面导航，它的顶面不会在较小的桌面屏幕上溢出？我的现实选择是什么

/*水平顶部导航菜单*/
#导航栏{
宽度：100%；/*更改导航栏的宽度*/
高度：50px；/*更改导航栏的高度*/
}
#导航CSS{
保证金：0自动；
填充：0px；
文本对齐：自动；
背景#E64238；
z指数：100；
位置：固定；
宽度：100%；/*更改导航栏的宽度*/
高度：50px；/*更改导航栏的高度*/
}
#导航CSS ul{
浮动：无；
列表样式：无；
保证金：0；
填充：0；
溢出：可见；
}
#导航css li a，#导航css li a:链接，#导航css li a:已访问{
颜色：#ffffff；/*更改主链接的颜色*/
显示：块；
保证金：0；
填充：15px 20px；/*更改顶部/底部间距的第一个数字，以及左/右间距的第二个数字*/
字体系列：Verdana；
文字装饰：无；
}
#导航CSS li a:悬停，#导航CSS li a:活动{
颜色：#ffffff；/*将鼠标悬停在上方时更改链接的颜色*/
背景：#87B60E；
保证金：0；
填充：15px 20px；/*确保这些与上面的部分相同*/
}
#导航CSS li li a，#导航CSS li li a:链接，#导航CSS li li a:已访问{
背景：#87B60E；/*更改下拉框的背景色*/
宽度：200px；
颜色：#ffffff；/*更改下拉链接的颜色*/
浮动：无；
保证金：0；
填充：7px 10px；/*与上面类似，更改链接周围的间距*/
文本对齐：左对齐；
}
#导航CSS li li a:悬停，#导航CSS li li a:活动{
背景：#E64238；/*更改悬停时下拉项目的背景色*/
颜色：#ffffff；/*更改悬停时下拉链接的颜色*/
填充：7px 10px；/*保持与上述部分相同*/
}
#导航{
浮动：无；
显示：内联块；
列表样式：无；
保证金：0；
填充：0；
}
#导航css li ul{
z指数：9999；
位置：绝对位置；
左：-999em；
高度：自动；
宽度：150px；
保证金：0；
填充：0；
}
#导航css li:hover ul，#导航css li li:hover ul，#导航css li li:hover ul，#导航css li.sfhover ul，#导航css li.sfhover ul，#导航css li.sfhover ul{
左：自动；
} 
#标志{
浮动：左；
右键填充：40px；/*更改徽标和第一个导航项之间的间距*/
左侧填充：50px；
}
#促销1{
背景：灰色；
}
#促销2{
背景：灰色；
}

缩小浏览器时，导航栏会溢出到这一行。

我已将display flex添加到#navigationcss中。而作为一个小的调整，也有一个最小宽度的李

这类问题很容易用flexbox解决：-）

/*水平顶部导航菜单*/
#导航栏{
宽度：100%；/*更改导航栏的宽度*/
高度：50px；/*更改导航栏的高度*/
}
#导航CSS{
保证金：0自动；
填充：0px；
文本对齐：自动；
背景#E64238；
z指数：100；
位置：固定；
宽度：100%；/*更改导航栏的宽度*/
高度：50px；/*更改导航栏的高度*/
显示：flex；/*已添加*/
}
#导航CSS ul{
浮动：无；
列表样式：无；
保证金：0；
填充：0；
溢出：可见；
}
#导航css li a，#导航css li a:链接，#导航css li a:已访问{
颜色：#ffffff；/*更改主链接的颜色*/
显示：块；
保证金：0；
填充：15px 20px；/*更改顶部/底部间距的第一个数字，以及左/右间距的第二个数字*/
字体系列：Verdana；
文字装饰：无；
}
#导航CSS li a:悬停，#导航CSS li a:活动{
颜色：#ffffff；/*将鼠标悬停在上方时更改链接的颜色*/
背景：#87B60E；
保证金：0；
填充：15px 20px；/*确保这些与上面的部分相同*/
}
#导航CSS li li a，#导航CSS li li a:链接，#导航CSS li li a:已访问{
背景：#87B60E；/*更改下拉框的背景色*/
宽度：200px；
颜色：#ffffff；/*更改下拉链接的颜色*/
浮动：无；
保证金：0；
填充：7px 10px；/*与上面类似，更改链接周围的间距*/
文本对齐：左对齐；
}
#导航CSS li li a:悬停，#导航CSS li li a:活动{
背景：#E64238；/*更改悬停时下拉项目的背景色*/
颜色：#ffffff；/*更改悬停时下拉链接的颜色*/
填充：7px 10px；/*保持与上述部分相同*/
}
#导航{
浮动：无；
显示：内联块；
列表样式：无；
保证金：0；
填充：0；
最小宽度：130px；/*已添加*/
}
#导航css li ul{
z指数：9999；
位置：绝对位置；
左：-999em；
高度：自动；
宽度：150