为什么我的CSS菜单有时会格式错误?
问题描述:
我目前正在一个网站上工作,但主菜单有点问题。为什么我的CSS菜单有时会格式错误?
有时候,10次中可能有1次,菜单没有加载它应该的方式。
看看下面的图片吧!
这是菜单应该如何看起来像:
...这是菜单如何实际样子有时:
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>
答
你的问题有点含糊。你想让你的菜单一直漂浮在页面的右侧吗?这就是您当前的float:right/left;
属性最终实现的目标。
如果你不希望出现这种情况,和/或如果你想在你的菜单项的造型更精确的控制,你应该与display: inline;
或display:inline-block;
(更换float: right;
和float: left;
都将完成内嵌样式您正在寻找,但后者将在顶部和其他地方有更多的填充)。
另一个问题是您的li:hover.menu
选择器代码现在完全是多余的; text-decoration: underline;
是已悬停的链接的默认行为。为了达到你想要的效果,你的链接上有text-decoration: none;
,直到你将它们悬停在它们上面,你需要改进你的选择器。现在,您的text-decoration: none;
属性应用于li
元素,但不适用于其子元素(a
元素)。我已经在下面的CSS中解决了这个问题。
我的CSS:
ul.menu {
font-size: 1.21em;
color: #333333;
padding: 0;
margin: 0;
padding-top: 29px;
height: 100%;
font-weight: 600;
width: auto;
display: inline-block;
}
li.menu {
list-style-type: none;
padding-left: 26px;
text-decoration: none;
display: inline-block;
}
li.menu>a {
text-decoration: none;
color: #333333;
}
li:hover.menu {
text-decoration: underline;
}
不管,除非你设定一个固定的宽度为您的菜单DIV,你的链接总是会落在线垂直当视口不宽足以容纳他们全部在线。
你的风格永远不会影响你的标记。在CSS中的类是.menu,并在您的标记其top_menu。如果这只是显示代码的失败;问题可能是ul.menu正确的;与没有给予witdth。所以你应该在那里设置一个最小宽度。 – caramba
是否真的需要在ul,li和a上添加相同的类名,而不是在li上添加类,并且可以通过ul.menu li {},ul.menu li {}来在css中访问它,这更加健壮,有用 –
'li:悬停。菜单{text-decoration:underline;}'是无用的代码,因为这是悬停时无论如何都是链接的默认行为。它应该被删除。 – TylerH