下拉菜单消失

Question

当您登录我的网站时，将鼠标悬停在用户名问候语上时会出现一个下拉菜单。下拉菜单中有三个项目，但是当您在第二个和第三个项目之间移动光标时（在“设置”和“注销”之间），下拉列表将消失。

你能解释一下发生了什么吗？

http://zanifesto.com

PHP：

<?php
if (is_user_logged_in()) :
$user = wp_get_current_user();?>


<acct>
<ul>
<li>Hi </li><strong>
<li>
<a href='http://zanifesto.com/my-account' rel='nofollow'>
    <?php echo $user->display_name ?>
</a>
<ul>
<li><a href="#">Portfolio</a></li>
<li><a href='http://zanifesto.com/my-account' rel='nofollow'>Settings</a></li>
<li><a href='<?php echo wp_logout_url( home_url() ); ?>' title='Logout'>Logout</a>    </li>
</ul>
</li>
</strong>

</ul>
</acct>

<?php else:?>

Please <strong><?php wp_loginout(); ?></strong>
or <a href="http://zanifesto.com/my-account">
<strong>Register</strong>
</a>

<?php endif; ?>

的CSS：

/ Hello用户名下拉列表 /

acct a {
 color: #e24949 !important;
}

acct a:hover {
color: #fff !important;
}

acct ul ul {
position: absolute;
top: 1em;
left: 0;
display: none;
padding: 12px 0 10px 0;
background: #3d3d3d;
}

acct ul li {
position: relative;
margin: 0 0 5px 0;
}

acct ul li:hover ul {
display: block;
}

Answer 1

这是你的z-index。页面上的滑块为position:relative，这会使其与菜单的该部分重叠。试试这个：

acct ul li {
  position: relative;
  margin: 0 0 5px 0;
  z-index:100;
}

这将使菜单重新登上顶部。

Answer 2

这样的错误通常发生在不准确的CSS中，并且可能伴随着一些草率的标记。可能发生的事情是你正在定义链接和可点击的内容很差，允许区域应该是链接的一部分，而不是。使用您的Firebug检查元素并切换样式以查看哪些有效。我注意到你使用了很多填充。我建议你重新检查你的CSS。

这可能会有所帮助：http://jigsaw.w3.org/css-validator/