0

我已经创建了菜单。这在 Firefox 中工作得很好，但在 google chrome 中，悬停不显示。此外，当我调整浏览器的大小时，菜单的一部分隐藏且不可滚动，我尝试使用 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

4

2 回答 2

1

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

jsfiddle.net/gzeLS/1

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

jsfiddle.net/gzeLS/2

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

要调整菜单大小，请使用max-width和进行一些操作min-width。在文本开始重叠之前，您只能获得大约 600 像素宽。通过给菜单一个min-width.

jsfiddle.net/gzeLS/3

但是，正如您已经发现的那样，当窗口太小时，部分菜单会被隐藏。即使您min-width在 body 上设置 a 以显示滚动条，您仍然无法滚动菜单，因为您正在使用position: fixed. 如果窗口小于某个宽度，您最好的选择是使用媒体查询来缩小字体大小。

jsfiddle.net/gzeLS/4

编辑：这是我为获得第三个 jsFiddle所做的更改的细分，无论窗口大小如何，居中都可以工作。

  • 要让菜单填满页面，而不是指定width，指定left和right。
  • 要将菜单项置于中心位置：
    • text-align: center在菜单上使用，而不是padding. 这将考虑不同的窗口大小。
    • 设置display: inline-block为ul使其可居中。
    • 设置width和max-width上ul。Usingwidth允许我们li按百分比调整元素的大小，如果窗口太小，它们可以缩小。max-width让我们将菜单项实际居中，当窗口足够宽以适应全宽菜单时，在左右两边留出边距。
  • 为防止屏幕太小时菜单项自动换行，请white-space: nowrap在ul.
  • 当窗口太小而无法容纳整个菜单时，要防止菜单项的文本重叠：
    • 设置min-width在菜单上。
    • 设置overflow: hidden在菜单项上。
  • 为简单起见，我还将列表项中的冗余样式按类合并到li选择器中。

这是我在第四个 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%; } }
于 2013-03-12T18:04:22.493 回答
0

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

#mainmenu ul li.home:hover

到

#mainmenu ul li.home a:hover

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

用于此修复的 JSFiddle

更新

这是您的第二个问题的解决方法。

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

希望这可以帮助。

于 2013-03-12T17:58:45.990 回答