Menubar無法正常工作

對於我的學校，我需要製作一個網站，我現在想要解決這個問題。菜單欄看起來很棒。但我無法點擊鏈接。如果你在鏈接的上面胡佛，它應該顯示一條線，前兩條是：Home和Componenten。剩下的它不顯示，我不能點擊它。這裏是我的HTML和CSS，我真的無法找到問題Menubar無法正常工作

<!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" width="100%" 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" width="618" height="347" 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%; 
}

來源

2014-01-11 C Sinke

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，跌落使用這些事情的表格。

來源

2014-01-11 13:11:22 drip

感謝您的回覆，它現在有效。在我的學校裏，他們只是說一切都是由你自己決定的。 –

Menubar無法正常工作

回答

相關問題