Question

我在我的网站顶部创建了一个包含多个按钮的导航栏。其中一个按钮现在我添加了一个下拉菜单。它只是使用带有列表项的无序列表和一些CSS编码，使其具有一些颜色，实际上是隐藏直到悬停。这有效，我在IE和FF上尝试过。两者都很好。现在谷歌浏览器在我那里尝试时，存在一些问题。

悬停时，项目会显示出来。但是当我尝试点击它们时它们会消失。我也曾经在另一个网站上遇到过这个问题，虽然在这种情况下我没有编码。我假设这是一个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>

Answer 1

据我所知，锚点和子列表之间的一个小间隙导致它消失导致列表在您停止短暂悬停在锚点上时消失。

我能够通过将子列表的位置减少2px（以下）来测试这一点，以便它触及锚点 - 因此在将鼠标悬停在子列表上之前不会离开锚点。

.navmenu li ul {
    top: 30px; /* instead of 32 */
}

Answer 2

我在Chrome浏览器中测试了您的演示网站，菜单运行正常。我试了几次，无法重现你上面提到的“消失的菜单”问题（我能够点击所有的菜单链接）

您的Chrome是最新的吗？您可以通过单击扳手图标＆gt;查看此信息。关于Google Chrome。最新版本（此时）为18.0xxx

如果您仍然遇到问题，请尝试禁用所有加载项，清除缓存并再次测试。要禁用加载项，请转到此处：扳手图标＆gt;设置＆gt;扩展选项卡

Chrome中的下拉菜单问题 - 未正确删除

2 个答案: