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

从display:block样式中删除:hover：

jsfiddle.net/gzeLS/1

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

jsfiddle.net/gzeLS/2

我不确定为什么Chrome不喜欢这样。我说这是一个Chrome bug。

要调整菜单大小，请使用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。这将考虑不同的窗口大小。
- 在display: inline-block上设置ul以使其可以居中。
- 在width上设置max-width和ul。使用width允许我们按百分比调整li元素的大小，这样如果窗口太小，它们就会缩小。而max-width让我们实际居中菜单项，当窗口宽度足以适合全宽度菜单时，在左右边缘给出边距。
要防止在屏幕太小时包装菜单项，请在white-space: nowrap上设置ul。
当窗口太小而无法适合整个菜单时，防止菜单项文本重叠：
- 在菜单上设置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%; } }

Answer 2

如果您进行了这一小改动，例如在主页链接上：

#mainmenu ul li.home:hover

以

#mainmenu ul li.home a:hover

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

JSFiddle for this fix

<强>更新

And here's a fix for your second problem.

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

希望这有帮助。

与Firefox一起运行良好，但谷歌浏览器和浏览器调整大小有一些问题？

2 个答案: