菜单显示问题

发布于 2024-11-24 01:42:29 字数 1365 浏览 1 评论 0原文

所以我有一个来自 ul 和 li 的菜单,它在页面加载时看起来像这样: 在此处输入图像描述

但是当我单击每个菜单并执行代码时,会发生这种情况:

在此处输入图像描述

我该怎么办?这是我的 CSS:

#menu-centered {
    padding: 0px;
    margin-bottom: 0px;
}
#menu-centered ul {
    margin: 0;
    padding: 0;
    height: 99px;
    width: 603px;
}
#menu-centered li {
    display: inline;
    list-style: none;
    padding: 0px;
    background: url(images/menu1.png) no-repeat right top;
}
#menu-centered a {
    border-style: none;
    border-color: inherit;
    border-width: medium;
    display: block;
    margin-right: 0;
    padding: 20px 30px 0px 30px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #FFFFFF;
    height: 68px;
    width: 130px;
    text-align: center;
}
#menu-centered a:hover {
    background: url(images/menu2.png) no-repeat right top;
}

这是我的菜单 html 代码:

<div id="menu-centered">
<ul>
<li> <a href="javascript:Clikbtn1()" >MENU1</a></li>
<li><a href="javascript:Clikbtn2()">MENU2</a></li>
<li><a href="javascript:Clikbtn3()">MENU3</a></li>
</ul>
</div>

请帮忙。谢谢

So I have a menu from ul and li, and it looks something like this at page load:
enter image description here

but when i click each menu and executed the code this happens:

enter image description here

what should i do? here's my CSS:

#menu-centered {
    padding: 0px;
    margin-bottom: 0px;
}
#menu-centered ul {
    margin: 0;
    padding: 0;
    height: 99px;
    width: 603px;
}
#menu-centered li {
    display: inline;
    list-style: none;
    padding: 0px;
    background: url(images/menu1.png) no-repeat right top;
}
#menu-centered a {
    border-style: none;
    border-color: inherit;
    border-width: medium;
    display: block;
    margin-right: 0;
    padding: 20px 30px 0px 30px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #FFFFFF;
    height: 68px;
    width: 130px;
    text-align: center;
}
#menu-centered a:hover {
    background: url(images/menu2.png) no-repeat right top;
}

and here's my html code for the menus:

<div id="menu-centered">
<ul>
<li> <a href="javascript:Clikbtn1()" >MENU1</a></li>
<li><a href="javascript:Clikbtn2()">MENU2</a></li>
<li><a href="javascript:Clikbtn3()">MENU3</a></li>
</ul>
</div>

Please help. Thanks

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

一笑百媚生 2024-12-01 01:42:29

您的菜单需要一些爱和恨。换句话说,您需要创建所有四个重要的链接伪选择器,以避免浏览器通过应用默认的活动伪选择器来破坏您的布局。

严格按照该顺序为菜单定义 a:link、a:visited、a:hover 和 a:active。

Your menus need some LoVe and HAte. In other words you need to create all four of the important link pseudoselectors to avoid letting browsers destroy your layout by applying the default active pseudoslector.

Define a:link, a:visited, a:hover and a:active for your menu, in that order exactly.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文