菜单栏不工作

Posted

技术标签:

【中文标题】菜单栏不工作【英文标题】:Menubar not working 【发布时间】:2014-01-11 13:00:05 【问题描述】:

对于我的学校,我需要建立一个网站,我正在尝试几天来解决这个问题。菜单栏看起来很棒。但我无法点击链接。如果您将鼠标悬停在链接上方,它应该显示一行,前两个它会显示:Home 和 Componenten。其余的它不显示,我无法点击它。 这是我的html和css,我真的找不到问题

<!DOCTYPE html>
<html lang="nl">
<head>
<link href="contact.php" type="text/php">
<link rel="stylesheet" href="layout.css" type="text/css">
<title>webshop game artikelen</title>
</head>

<body>
<div id="container">
<table class="header-tabs"  cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="actief"><a href="index.html">Home</a></td>
<td style=" width: 120px;"><a href="component.html">Componenten</a></td>
<td><a href="randapparatuur.html">Randapparatuur</a></td>
<td><a href="laptop-amp-pc.html">Laptop &amp; PC</a></td>
<td><a href="tablets-amp-telefoons.html">Tablets &amp; Telefoons</a></td>
<td><a href="netwerk.html">Netwerk</a></td>
<td><a href="software.html">Software</a></td>
<td><a href="printing.html">Printing</a></td>
<td><a href="contact.html">Contact</a></td>
</tr>
</tbody>
</table>
<a href="contact.html"></a>
</div> <!--header-->
<div id="content">
<video poster="poster.jpg"   controls preload> 
<source src="stopmotion.mp4" media="only screen and (min-device-width: 568px)"></source> 
<source src="stopmotion.mp4" media="only screen and (max-device-width: 568px)"></source> 
<source src="video.ogv"></source> 
</video>
</div> <!--content-->
<div id="footer">
2014, all right reserved
<a href="mailto:schoolscs%40gmail.com">Webmaster</a>
</div> <!--footer-->
</div> <!--container-->
</body>
</html>

这是我的css

#page width: 800px;
position: relative;
min-height: 100%;
height:auto !important; /* voor moderne browsers */
height:100%; /* voor IE */


/* blauwe menubalk */
.header-tabs 
float: left;
border-collapse: collapse;
border-spacing: 2px;
font-size: 11pt;

.header-tabs td a, .header-tabs td a:visited
height: 26px;
background-color: #424C77;
color: #eff2fe;
font-size: 0.8em;
text-decoration: none;
display: block; 
line-height: 24px;


.header-tabs td.actief a
background-color: #eff2fe;
color: #424C77;


.header-tabs td:hover a
text-decoration: underline;
 

/* //menu */

#content

background-color: ######;
width: 80%;
position:relative;

#footer 
position: absolute; 
bottom: 0; /* heel belangrijk */ 
height: 20px; 
width: 100%; 

【问题讨论】:

【参考方案1】:

1) 从以下位置移除浮动:

.header-tabs 
   border-collapse: collapse;
   border-spacing: 2px;
   font-size: 11pt;

Demo

2) 或者您可以清除表格后的浮动,如下所示:

#container  position: relative; overflow: hidden; 

Demo

3) 或者你可以给容器增加高度:

#container  height: 26px; 

Demo

并告诉你的学校教你现代 html/css,放弃使用表格来做这些事情。

【讨论】:

感谢您的回复,现在可以使用了。在我的学校,他们只是说自己解决所有问题。

以上是关于菜单栏不工作的主要内容,如果未能解决你的问题,请参考以下文章

保持固定菜单栏不重叠

Python Tkinter 菜单栏不显示

Mac电脑(苹果电脑)Qt 菜单栏不显示的问题解决办法

CSS中的菜单栏不出现

微信公众号关注界面的菜单栏跟实际的菜单栏不一致

标签栏不隐藏使用 DDMenuController(Fb 像滑动菜单)