Css firefox可以正常工作，但google chrome和浏览器大小调整有问题吗？

我已经创建了菜单。这在firefox中运行得很好，但在google chrome中，不会显示悬停。此外，当我调整浏览器的大小时，菜单的一部分隐藏且不可滚动，我尝试使用菜单

width:100%，但当我这样做并调整浏览器大小时，类布局会扭曲，并显示在菜单行之外，菜单会扭曲。是否仍有解决此问题的方法：
因此，我强制将菜单的宽度定义为1366px，以避免菜单失真。请帮忙

#主菜单{
宽度：1366px；
高度：50px；
/*位置：相对位置*/
位置：固定；
顶部：18px；
左侧填充：200px；
线高：50px；
背景：#0b2c3d；
z指数：10；
盒影：5px0px 15px#7e7a7a；
}
#主菜单，#dd#u home，#dd#u profile，#dd#u achv，#dd#u contact，#dd#u login{
光标：指针；
}
#主菜单{
列表样式类型：无；
边际：0px；
填充：0px；
}
#主菜单ulli{
文字装饰：无；
浮动：左；
/*右边框样式：虚线*/
}
#主菜单ulli a{
文字装饰：无；
显示：块；
宽度：150px；
文本对齐：居中；
文本转换：大写；
颜色：白色；
}
#主菜单ulli.home{
宽度：150px；
文本对齐：居中；
页边顶部：-5px；
边框底部：5px实心#0a68fb；
}
#主菜单ul li.主页：悬停{
显示：块；
背景色：#0a68fb；
边框左上半径：5px；
边框右上角半径：5px；
}
#主菜单ul li.profile{
页边顶部：-5px；
边框底部：5px实心#ed4901；
}
#主菜单ul li.配置文件：悬停{
显示：块；
背景色：#ed4901；
边框左上半径：5px；
边框右上角半径：5px；
}
#主菜单ul li.achv{
页边顶部：-5px；
边框底部：5px实心#27fb06；
}
#主菜单ul li.achv:悬停{
显示：块；
背景色：#27fb06；
边框左上半径：5px；
边框右上角半径：5px；
}
#主菜单ul li.contact{
页边顶部：-5px；
边框底部：5px实心#b70bfb；
}
#主菜单ul li。联系人：悬停{
显示：块；
背景色：#b70bfb；
边框左上半径：5px；
边框右上角半径：5px；
}
#主菜单ul li。联系人：选中{
页边顶部：-5px；
边框底部：10px实心#b70bfb；
}
#主菜单ul li.login{
页边顶部：-5px；
边框底部：5px实心#36b096；
}
#主菜单ul li.登录：悬停{
显示：块；
背景色：#36b096；
边框左上半径：5px；
边框右上角半径：5px；
}
#主菜单ul li.nepal{
页边顶部：-5px；
边框底部：5px实心#f8d605；
溢出：隐藏；
}

HTML











jsiddle:
如果您做了这个小改动，例如在主页链接上：

#mainmenu ul li.home:hover

至

#mainmenu ul li.home a:hover

然后你会注意到你的鼠标悬停属性在Chrome和Firefox中正确显示


更新


您需要将主div的
text align
设置为
center
，以便将
ul
置于容器的中心。典型的
边距：0自动不起作用。我添加了一个
空白：nowrap以及当屏幕小于水平对齐的菜单项时防止中断

希望这有帮助。
从
：悬停
样式中删除
显示：块
：


或者，将
display:block
添加到非悬停样式：


我不知道为什么Chrome不喜欢这样。我认为这是一个Chrome bug

要调整菜单的大小，请使用
max width
和
min width
执行一些操作。在文本开始重叠之前，您只能获得大约600px宽的文本。通过给菜单一个
最小宽度
来防止重叠


但是，正如您已经发现的，当窗口太小时，部分菜单被隐藏。即使您在正文上设置了一个
minwidth
以显示滚动条，您仍然无法滚动菜单，因为您正在使用
position:fixed
。如果窗口小于某个宽度，最好使用媒体查询缩小字体大小


编辑：以下是我所做更改的明细，这些更改是为了在不考虑窗口大小的情况下实现居中


要获取填充页面的菜单，而不是指定
宽度
，请指定
左侧
和
右侧
要将菜单项置于中间位置，请执行以下操作：

使用菜单上的
text align:center
，而不是
padding
。这将考虑不同的窗口大小
在
ul
上设置
display:inline block
，使其可居中
在
ul
上设置
width
和
max width
。使用
width
可以按百分比调整
li
元素的大小，如果窗口太小，可以缩小它们。和
max width
让我们实际将菜单项居中，当窗口足够宽以适应全宽菜单时，在右侧和左侧提供边距

要防止屏幕太小时菜单项被环绕，请在
ul
上设置
white space:nowrap
当窗口太小而无法容纳整个菜单时，要防止菜单项的文本重叠，请执行以下操作：

在菜单上设置
最小宽度
在菜单项上设置溢出：隐藏

为了简单起见，我还将列表项中的冗余样式按类合并到
li
选择器中

以下是我为使菜单适应较小的窗口并保持可见所做的更改：


#mainmenu ul li.home a:hover