Html 如何使此响应导航工作？

我希望它像一个反应迅速的下拉菜单，但只是在悬停时，我无法让它在600px或更小的速度下正常运行。非常感谢您的帮助，谢谢：）我想这样做，当浏览器变小时，您可以看到第一个

，而不是全部

body{border:0px；margin:0px；}
保险商实验室{
列表样式类型：无；
显示：块；
宽度：100%；
高度：50px；
背景：#000000；
填充：0px；
边际：0px；
边界：0px；
位置：固定；
}
李{
显示：内联块；
浮动：左；
宽度：16.667%；
高度：50px；
文本对齐：居中；
线高：50px；
}
#一{背景：#836749；}
#两个{背景：#629492；}
#三{背景：#927493；}
#四{背景：#482057；}
#五{背景：#293047；}
#六{背景：#927403；}
#一：悬停{背景：#000000；}
#二：悬停{背景：#000000；}
#三：悬停{背景：#000000；}
#四：悬停{背景：#000000；}
#五：悬停{背景：#000000；}
#六：悬停{背景：#000000；}
ullia{
文字装饰：无；
颜色：#FFFFFF；
}
@仅介质屏幕和（最大宽度：600px）{
保险商实验室{
位置：绝对位置；
边界：0px；
填充：0px；
保证金：自动；
身高：14.28571428571429%；
溢出：隐藏；
宽度：100%；
背景#038493；
}
悬停{
位置：绝对位置；
宽度：100%；
身高：100%；
保证金：自动；
边界：0px；
填充：0px；
}
李{
宽度：100%；
高度：自动：
背景#038493；
文本对齐：居中；
浮动：左；
}
李：悬停{高度：14.28571428571429%；}
}

正文{
边界：0px；
边际：0px；
}
保险商实验室{
列表样式类型：无；
显示：块；
宽度：100%；
高度：50px；
背景：#000000；
填充：0px；
边际：0px；
边界：0px；
位置：固定；
}
李{
显示：内联块；
浮动：左；
宽度：16.667%；
高度：50px；
文本对齐：居中；
线高：50px；
}
#一个{
背景#836749；
}
#两个{
背景：#629492；
}
#三{
背景：#927493；
}
#四{
背景：#482057；
}
#五{
背景：#293047；
}
#六{
背景：927403；
}
#一：悬停{
背景：#000000；
}
#二：悬停{
背景：#000000；
}
#三：悬停{
背景：#000000；
}
#四：悬停{
背景：#000000；
}
#五：悬停{
背景：#000000；
}
#六：悬停{
背景：#000000；
}
ullia{
文字装饰：无；
颜色：#FFFFFF；
}
@仅介质屏幕和（最大宽度：600px）{
保险商实验室{
位置：相对位置；
边界：0px；
填充：0px；
保证金：自动；
最大高度：50px；
高度：50px；
溢出：隐藏；
宽度：100%；
背景#038493；
}
悬停{
位置：相对位置；
宽度：100%；
最大高度：100%；
身高：100%；
保证金：自动；
边界：0px；
填充：0px；
}
李{
宽度：100%；
高度：自动：背景：#038493；
文本对齐：居中；
浮动：左；
}
李：悬停{
高度：50px；
}
}

---

如果导航栏中的链接数保持不变，则可以使用

宽度：16.6%作为css标记

CSS:
一、二、三、四、五、六{
宽度：16.6%；
浮动：左；
保证金：0px 0px 0px 0px；
文字装饰：无；
文本对齐：居中；
填充顶部：20px；
垫底：20px；
字体大小：15px；
}
#一：悬停，二：悬停，三：悬停，四：悬停，五：悬停，六：悬停{
背景色：#000；
}
a{
颜色：#FFF；
}
#一个{
背景色：红色；
}
#两个{
背景颜色：蓝色；
}
#三{
背景颜色：绿色；
}
#四{
背景色：黑色；
}
#五{
背景色：#AAA；
}
#六{
背景色：#555；
}