【发布时间】：2012-02-19 16:34:47
【问题描述】：
我在我的网站顶部制作了一个导航栏，其中包含多个按钮。我现在的其中一个按钮添加了一个下拉菜单。它只是使用一个带有列表项的无序列表，并带有一些 CSS 编码，以使其具有一些颜色，并且在悬停之前实际上是隐藏的。这行得通，我已经在 IE 和 FF 上尝试过。两者都工作正常。现在，当我在那里尝试使用 Google Chrome 浏览器时，出现了一些问题。
悬停时会出现它们应该出现的项目。但是当我尝试点击它们时，它们就会消失。我也曾在另一个网站上遇到过这个问题，尽管我没有在那种情况下对其进行编码。我假设这是一个 Chrome 问题，但我也假设我可以在我的网站上解决这个问题。
我的问题是如何在 Chrome 上解决这个问题（虽然看代码而不是浏览器）？
注意：如果我进行硬刷新 (CTRL+SHIFT+R)，我可以将鼠标悬停在这些东西上。一旦我单击链接或再次执行正常刷新，尽管问题又回来了。显然，我不想硬刷新点击下拉菜单中的项目，网站的用户也不想这样做。
编辑：这是一个链接，您可以在我的网站测试区查看问题： Testing Area
Edit2：由于我没有收到任何回复，我将包含代码。
index.php:
<?php session_start(); ?>
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="navbar.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php include_once("analyticstracking.php") ?>
<?php include("header.php"); ?>
<p class="content" >Welcome to my homepage! This page will feature a wide range of things from video tutorials to help forums. </p>
<p class="content" ><em>Remember the site is currently being devopled still! Check out the "<a href="contact.php">Contact Us</a>" button on the left if you have any bugs to report.</em></p>
<?php include("footer.php"); ?>
</body>
</html>
style.css：
b{
color:#000000;
}
a{
text-decoration:none;
color:#666;
}
img{
display:block;
margin:auto;
}
p.welcome {
text-align:center;
font-family: “verdana”;
font-size:1.875em;
color:white;
font-weight:900;
}
p.content {
font-family: “verdana”;
font-size:1em;
color:white;
}
div.main{
width:75%;
margin:auto;
background:black;
}
div.row1{
width:100%;
}
div.row2{
width:100%;
}
div.row2col1{
float:left;
margin:0;
padding:1em;
color:white;
}
div.row2col2{
margin-left:10%;
margin-right:10%;
background-color:brown;
padding:1em;
border:15px solid #212121;
}
body{
background-color:#393635;
color:white;
}
p.footer{
text-align:right;
}
.clearFloat{
clear:both;
margin:0;
padding:0;
}
header.php：
<div class="main">
<div class="row1"> <a href="index.php"><img src="logo.png" alt="Logo"/></a>
</div>
<div class="navMenu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="videos.php">Videos</a>
<ul>
<li><a href="videolatest.php">Latest Videos</a></li>
<li><a href="videotutorial.php">Tutorials</a></li>
<li><a href="videogaming.php">Gaming</a></li>
<li><a href="videocoding.php">Coding</a></li>
</ul>
</li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
<br class="clearFloat" />
</div>
<div class="row2col2">
footer.php
</div>
Copyright Fog Productions 2012
</div>
【问题讨论】：
-
@Fogest - 为确保您的问题在 StackOverflow 上得到正确的关注，您能否在此 Chrome 问题中包含相关的 HTML 和 CSS？ （或指向可以在操作中观察到问题的链接）
-
如果您需要在帖子中添加任何其他内容以帮助解决此问题，请随时提出！
-
添加了希望有帮助的代码！
标签： html css navigation menu