Question

我目前正在网站上工作，但主菜单有点问题。

有时候，10次中可能只有1次，菜单没有按照预期的方式加载。

看看下面的图片！

这就是菜单的样子： enter image description here

...这就是菜单实际上有时看起来的样子： enter image description here

ul.menu {
    font-size: 1.21em;
    color: #333333;
    padding: 0;
    margin: 0;
    padding-top: 29px;
    height: 100%;
    font-weight: 600;
    width: auto;
    float: right;
}
li.menu {
    list-style-type: none;
    padding-left: 26px;
    text-decoration: none;
    width: auto;
    float: left;
}
li:hover.menu { 
    text-decoration: underline;
}

HTML

<ul class="menu">
    <li class="menu"><a href="page_1.html" class="menu">PAGE 1</a></li>
    <li class="menu"><a href="page_2.html" class="menu">PAGE 2</a></li>
    <li class="menu"><a href="page_3.html" class="menu">PAGE 3</a></li>
</ul>

Answer 1

HTML代码中的课程是＆＃39; top_menu＆＃39;但它的菜单＆＃39;在你的CSS中。此外，你应该添加：

display:inline-block;
vertical-align:top;

用于菜单类，（因为默认情况下li不是内联的）

并删除

float:left;

Answer 2

你的问题有点模糊。您希望菜单一直浮动到页面右侧吗？这就是您当前float:right/left;属性最终实现的目标。

如果您不想这样做，并且/或者如果您想要更精确地控制菜单项的样式，则应替换 float: right;和float: left; { {1}}或display: inline;（两者都将完成您正在寻找的内联样式，但后者将在顶部和其他地方有更多填充）。

另一个问题是你的display:inline-block;选择器代码现在完全是多余的; li:hover.menu是已悬停的链接的默认行为。为了达到你想要的效果，你的链接为text-decoration: underline;，直到你将它们悬停在它们上面，你需要稍微改进你的选择器。现在，您的text-decoration: none;属性已应用于text-decoration: none;元素，但不应用于其子元素（li元素）。我已经在下面的CSS中解决了这个问题。

我的CSS：

JSFiddle

无论如何，除非为菜单div设置固定宽度，否则当视口不够宽以便全部内嵌时，链接总是垂直排列。

为什么我的CSS菜单有时格式错误？

2 个答案: