Question

当我将鼠标悬停在主页标签上时出现问题。下拉列表落后于USERNAME。我尝试了不同的东西，但它没有奏效。此外，我还没有找到解释此错误的帖子。

我的CSS代码：

.dropdown-nav {
    display: block;
    padding: 10px;
    color: white;
    font-size: .9em;
    font-style: normal;
    font-weight: 700;
    font-family: "Open Sans",Arial,sans-serif;
    text-transform: uppercase;
}
.dropdown-nav:hover {
    display: block;
    padding: 10px;
    color: white;
    font-size: .9em;
    font-style: normal;
    font-weight: 700;
    font-family: "Open Sans",Arial,sans-serif;
    text-transform: uppercase;
    background-color: #00A5F7;
    border-radius: 4px;
}
.customnav li:hover  ul  {
    display: block;
    list-style-type: none;

}
.customnav li ul {
    display: none;
    position: absolute;
    margin-top: 5px;
    background-color: #0088cc;
    list-style-type: none;
    padding-left: -100px;
    border-top-left-radius: 0px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
}
.dropdown-custom-ul {
    padding-left: 10px;
    padding-top: 15px;
    padding-right: 10px;
    padding-bottom: 9px;
    box-shadow: 2px 4px 5px #696969;
}

HTML code：

<nav class="customnav">
    <li class="navtab">
    <a class="navtab-inside" href="index.php">Home &or;</a>
    <ul class="dropdown-custom-ul">
        <li><a class="dropdown-nav" href="#">FAQ</a></li>
        <li><a class="dropdown-nav" href="#">Need Help?</a></li>
        <li><a class="dropdown-nav" href="#">Contact Us</a></li>
        <li><a class="dropdown-nav" href="#">How It Works</a></li>
        </ul>
    </li>
    <li class="navtab">
    <a class="navtab-inside" href="#">Maps</a>
    </li>
    <li class="navtab">
    <a class="navtab-inside" href="#">Mods</a>
    </li>
    <li class="navtab">
    <a class="navtab-inside" href="#">Plugins</a>
    </li>
    <li class="navtab">
    <a class="navtab-inside" href="#">Texture Packs</a>
    </li>
    <li class="navtab">
    <a class="navtab-inside" href="#">Sell a service</a>
    </li>
    <li class="navtab2">
    <a class="navtab-inside" href="#">Sign In</a>
    </li>
    <li class="navtab">
    <a class="navtab-inside navtab-inside-active" href="#">Join</a>
    </li>
</nav>


<form action="" class="box2" method="post">
<a class="join_firstline">Join with Password</a>
<div class="join input-group">
    <a class="join_topic">Username *</a>
    <input type="text" name="username" id="username" value="" class="form-control">
</div>
<div class="join input-group">
    <a class="join_topic">First Name *</a>
    <input type="text" name="f_name" id="f_name" value="" class="form-control">
</div>

Answer 1

这是从问题正文中移出的自我回答。

已修复：向z-index: 1;添加了.customnav li ul。

下拉列表中的CSS问题

1 个答案: