与Firefox正常工作，但谷歌浏览器和浏览器调整大小有一些问题？

Question

我已经创建了菜单。这在firefox中工作得很好，但在谷歌浏览器中，悬停不显示。另外，当我调整我的浏览器部分菜单隐藏并且不可滚动时，我尝试使用MENU width:100%;，但是当我这样做并调整浏览器大小时，类布局失真并显示出菜单行，菜单变形。无论如何要解决这个问题： 所以我强制定义菜单的宽度为1366px，以避免菜单失真。请帮忙。

#mainmenu { 
    width:1366px; 
    height:50px; 
    /*position:relative;*/ 
    position:fixed; 
    top:18px; 
    padding-left:200px; 
    line-height:50px; 
    background:#0b2c3d; 
    z-index:10;  
    box-shadow:5px 0px 15px #7e7a7a; 
} 
#mainmenu, #dd_home, #dd_profile, #dd_achv, #dd_contact,#dd_login { 
    cursor:pointer; 
} 
#mainmenu ul { 
    list-style-type:none; 
    margin:0px; 
    padding:0px;   
} 
#mainmenu ul li { 
    text-decoration:none; 
    float:left; 
    /*border-right-style:dotted;*/ 
} 
#mainmenu ul li a { 
    text-decoration:none; 
    display:block; 
    width:150px; 
    text-align:center; 
    text-transform:uppercase;   
    color:white; 
} 
#mainmenu ul li.home { 
    width:150px; 
    text-align:center; 
    margin-top:-5px; 
    border-bottom:5px solid #0a68fb; 
} 
#mainmenu ul li.home:hover { 
    display:block; 
    background-color:#0a68fb; 
    border-top-left-radius:5px; 
    border-top-right-radius:5px; 
} 
#mainmenu ul li.profile { 
    margin-top:-5px; 
    border-bottom:5px solid #ed4901; 
} 
#mainmenu ul li.profile:hover { 
    display:block; 
    background-color:#ed4901; 
    border-top-left-radius:5px; 
    border-top-right-radius:5px; 
} 
#mainmenu ul li.achv { 
    margin-top:-5px; 
    border-bottom:5px solid #27fb06; 
} 
#mainmenu ul li.achv:hover { 
    display:block; 
    background-color: #27fb06; 
    border-top-left-radius:5px; 
    border-top-right-radius:5px; 
} 
#mainmenu ul li.contact { 
    margin-top:-5px; 
    border-bottom:5px solid #b70bfb; 
} 
#mainmenu ul li.contact:hover { 
    display:block; 
    background-color:#b70bfb; 
    border-top-left-radius:5px; 
    border-top-right-radius:5px; 
} 
#mainmenu ul li.contact:checked { 
    margin-top:-5px; 
    border-bottom:10px solid #b70bfb; 
} 
#mainmenu ul li.login { 
    margin-top:-5px; 
    border-bottom:5px solid #36b096; 
} 
#mainmenu ul li.login:hover { 
    display:block; 
    background-color:#36b096; 
    border-top-left-radius:5px; 
    border-top-right-radius:5px; 
} 
#mainmenu ul li.nepal { 
    margin-top:-5px; 
    border-bottom:5px solid #f8d605; 
    overflow:hidden; 
} 

HTML

<div id="mainmenu"> 
    <ul> 
     <li class="home"><a href="about.aspx"> Home</a> 
     <li class="profile"><a href="profile.aspx" >Profile</a> 
     <li class="achv"><a href="achv.aspx">achievements</a> 
     <li class="contact"><a href="Contact.aspx">Contact</a> 
     <li class="login"><a href="login.aspx">Log in</a> 
     <li class="nepal"><a href="#">jaya nepal</a></li> 
    </ul> 
</div> 

的jsfiddle：jsfiddle.net/gzeLS

Answer 1

如果你把这个小的变化，例如在家乡链路上：

#mainmenu ul li.home:hover 

TO

#mainmenu ul li.home a:hover 

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

JSFiddle for this fix

UPDATE

And here's a fix for your second problem.

你需要设置你的主人div来center的text-align以便在容器内居中ul。典型的margin: 0 auto;将不起作用。我还添加了一个white-space:nowrap;以防止在屏幕小于水平对齐的菜单项时发生断裂。

希望这会有所帮助。

Answer 2

取出display:block从:hover风格：

jsfiddle.net/gzeLS/1

或者，添加display:block到非hover样式：

jsfiddle.net/gzeLS/2

我不知道为什么没有按铬”那样。我会说这是一个Chrome错误。

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

jsfiddle.net/gzeLS/3

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

jsfiddle.net/gzeLS/4

编辑：这里是我提出去哪里the third jsFiddle中心工作，无论窗口大小的变化的故障。

• 为了让菜单以填充页面，而不是指定width，指定left和right。
• 在中心位置的菜单项：
  • 使用text-align: center菜单，不padding上。这将考虑到不同的窗口大小。
  • 在ul上设置display: inline-block使其成为中心。
  • 在ul上设置width和max-width。使用width允许我们按百分比调整li元素的大小，如果窗口太小，可以让它们缩小。而max-width让我们让我们居中对齐菜单项，当窗口为的宽度足以满足菜单宽度时，在左侧和右侧留出边距。
• 为防止菜单项在屏幕太小时打包，请在ul上设置white-space: nowrap。
• 当窗口太小而不适合整个菜单时，为防止菜单项的文本重叠：
  • 设置菜单上的min-width。
  • 设置overflow: hidden的菜单项。
• 为了简单起见，我也将类别列表中的冗余样式合并到li选择器中。

下面是我在the fourth jsFiddle所做的更改拿到菜单，以适应较小的窗口，并保持可见：

• 从菜单中删除min-width，使其能够缩小以适合窗口。
• 添加媒体查询样式逐渐减小字体大小窗口大小减小：

@media all and (max-width: 640px) { #mainmenu { font-size: 90%; } } 
@media all and (max-width: 590px) { #mainmenu { font-size: 80%; } } 
@media all and (max-width: 530px) { #mainmenu { font-size: 70%; } } 
@media all and (max-width: 468px) { #mainmenu { font-size: 60%; } }