当我将鼠标悬停在链接上时，CSS 下拉菜单不起作用

时间：2021-07-25 22:09:40

标签： html css

在过去的几个小时里，我一直试图让这个下拉菜单正常工作，但无济于事。当您将鼠标悬停在 .dropdown 上时，我试图让列表菜单 .droptoggle 出现。我只是要显示整个页面，因为我不知道它可能是什么，我知道它可能是最小和最容易修复的事情。 （我对 html 和 css 很陌生，所以这可能看起来很乱。非常感谢您的帮助！

HTML：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #36363c;
}

.tbback {
  height: 65px;
  width: 100%;
  background: #2d2d33;
}

.navtext li {
  display: inline;
  padding: 25px;
}

.navtext a {
  text-decoration: none;
  color: #cfcfcf;
  font-family: "Teko", sans-serif;
  font-size: large;
  transition: all 0.2s linear;
}

.navtext a:hover {
  color: #712889;
}

.navtext {
  text-align: center;
  padding-right: 10px;
  padding-top: 21px;
  width: 100%;
  position: relative;
}

.navtext i {
  padding-right: 5px;
}

.openapi {
  float: right;
  position: relative;
  z-index: 10;
  text-decoration: none;
  color: #cfcfcf;
  font-family: "Teko", sans-serif;
  font-size: large;
  padding-right: 10px;
  padding-top: 21px;
  transition: all 0.2s linear;
}

.openapi i {
  padding-right: 5px;
}

.openapi:hover {
  color: #30ee46;
}

.chatback {
  height: calc(100vh - 65px);
  width: 300px;
  background: #2d2d33;
  overflow: hidden;
  overflow-y: scroll;
  display: flex;
  flex-direction: column-reverse;
  float: left;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background: #44444b;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #494950;
}

.chatobject {
  text-decoration: none;
  color: #cfcfcf;
  font-family: "Source Code Pro", monospace;
  font-size: small;
  padding: 15px;
}

.droptoggle {
  float: right;
  display: flex;
  padding-top: 13px;
  padding-right: 15px;
}

.imground {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  border: 3px solid #ff54489c;
  z-index: 15;
}

.fas.fa-caret-down {
  color: white;
  text-decoration: none;
  padding-top: 13px;
  float: right;
  padding-left: 10px;
  z-index: 20;
}

.profilename {
  text-decoration: none;
  color: #cfcfcf;
  font-family: "Teko", sans-serif;
  font-size: large;
}

.userprop {
  padding-top: 23px;
  position: absolute;
  z-index: 11;
}

.userprop li {
  display: inline;
  padding-right: 10px;
}

.userprop i {
  padding-right: 4px;
}

.userprop a {
  text-decoration: none;
  color: #a8a8a8;
  font-family: "Teko", sans-serif;
  font-size: medium;
  transition: all 0.2s linear;
}

.proppos {
  float: right;
  padding-right: 250px;
}

.userprop a:hover {
  color: #ff5448;
}

.dropdown {
  float: right;
  margin-top: 5px;
  background: #2d2d33;
  padding-left: 10px;
  padding-right: 80px;
  border-radius: 5px;
  margin-right: 5px;
  padding-bottom: 20px;
  display: none;
}

.dropdown li {
  list-style-type: none;
  padding-top: 20px;
}

.dropdown a {
  text-decoration: none;
  color: #fff;
  font-family: "Cairo", sans-serif;
  font-size: 13px;
}

.dropdown i {
  padding-right: 10px;
  font-size: 15px;
}

.droptoggle:hover + .dropdown {
  display: block;
}
<?

    require 'steamauth/steamauth.php';
    require 'steamauth/userInfo.php';

    if(isset($_SESSION['steamid']))
    {
        $id = $_SESSION['steamid'];
    }

    else
    {
        #Not logged in
    }
?>




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LoopTrades</title>
    <link rel="stylesheet" href="/css/main.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Teko:wght@600&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cairo&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/80f97a33ce.js" crossorigin="anonymous"></script>
</head>
<!--Start of Tawk.to Script-->
<script type="text/javascript">
    var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date();
    (function () {
        var s1 = document.createElement("script"), s0 = document.getElementsByTagName("script")[0];
        s1.async = true;
        s1.src = 'https://embed.tawk.to/60fab213d6e7610a49aca619/1fb9kf738';
        s1.charset = 'UTF-8';
        s1.setAttribute('crossorigin', '*');
        s0.parentNode.insertBefore(s1, s0);
    })();
</script>
<!--End of Tawk.to Script-->
<body>

<!---NAVBAR--->
    <? if(isset($_SESSION['steamid'])) {?>
<div class="tbback">
    <div class="proppos">
        <ul class="userprop">
            <li><a href="#"><i class="fas fa-wallet"></i>DEPOSIT</a></li>
            <li><a href="#"><i class="fas fa-suitcase"></i>INVENTORY</a></li>
        </ul>
    </div>
    <a href="#" class="droptoggle"><img class="imground" src="<?=$steamprofile['avatarmedium'];?>"><i class="fas fa-caret-down"></i></a>
    <ul class="navtext">
        <li><a href="#"><i class="fas fa-sync-alt"></i>TRADE</a></li>
        <li><a href="#"><i class="fas fa-shopping-cart"></i>SHOP</a></li>
        <li><a href="/pages/premium.html" style="color: #ffe063;"><i class="fas fa-crown"></i>PREMIUM</a></li>
        <li><a href="#" style="color: #30ee46;"><i class="fas fa-gift"></i>GIVEAWAYS</a></li>
    </ul>
</div>
<div class="dropdown">
    <ul>
        <li><a href="#" style="color: #ff5448;"><i class="fas fa-user"></i><?=$steamprofile['personaname'];?></a></li>
        <li><a href="#" style="color: #30ee46;"><i class="fas fa-gift"></i>Rewards</a></li>
        <li><a href="#"><i class="fas fa-book"></i>Blog</a></li>
        <li><a href="#"><i class="fas fa-question-circle"></i>Support</a></li>
        <li><a href="#"><i class="fas fa-info-circle"></i>Info</a></li>
        <li><a href="steamauth/logout.php"><i class="fas fa-sign-out-alt"></i>Logout</a></li>
    </ul>
</div>
    <!---DEPO--->
    <!---CHAT--->
 <div class="chatback">
    <div class="chatscroll">
        <div class="chatobject">
        </div>
    </div>
</div>
<? } else {?>

<? } ?>
</body>
</html>

3 个答案:

答案 0 :(得分：2)

您正在使用以下 CSS 选择器：

.droptoggle:hover + .dropdown

此选择器选择任何类 .dropdown 的元素，该元素直接位于同一层次结构级别上类 .droptoggle 的元素之后。

但是您的 .dropdown 列表元素不在同一级别：

<div class="tbback">
    <a href="#" class="droptoggle">(...)</a>
    (...)
</div>
<div class="dropdown">
    <ul>
        (...)
    </ul>
</div>

因此，多种可能的解决方案之一可以是将 .dropdown div 元素移动到 .tbback 元素内的 .navtext ul 元素之后，并将 CSS 选择器更改为：

.droptoggle:hover + .navtext + .dropdown

答案 1 :(得分：1)

在 .dropdown 之后立即移动您的 .droptoggle 元素：

<div class="tbback">
    <div class="proppos">
        <ul class="userprop">
            <li><a href="#"><i class="fas fa-wallet"></i>DEPOSIT</a></li>
            <li><a href="#"><i class="fas fa-suitcase"></i>INVENTORY</a></li>
        </ul>
    </div>
    <ul class="navtext">
        <li><a href="#"><i class="fas fa-sync-alt"></i>TRADE</a></li>
        <li><a href="#"><i class="fas fa-shopping-cart"></i>SHOP</a></li>
        <li><a href="/pages/premium.html" style="color: #ffe063;"><i class="fas fa-crown"></i>PREMIUM</a></li>
        <li><a href="#" style="color: #30ee46;"><i class="fas fa-gift"></i>GIVEAWAYS</a></li>
    </ul>
    <a href="#" class="droptoggle"><img class="imground" src="<?=$steamprofile['avatarmedium'];?>"><i class="fas fa-caret-down"></i></a>
    <div class="dropdown">
        <ul>
            <li><a href="#" style="color: #ff5448;"><i class="fas fa-user"></i><?=$steamprofile['personaname'];?></a></li>
            <li><a href="#" style="color: #30ee46;"><i class="fas fa-gift"></i>Rewards</a></li>
            <li><a href="#"><i class="fas fa-book"></i>Blog</a></li>
            <li><a href="#"><i class="fas fa-question-circle"></i>Support</a></li>
            <li><a href="#"><i class="fas fa-info-circle"></i>Info</a></li>
            <li><a href="steamauth/logout.php"><i class="fas fa-sign-out-alt"></i>Logout</a></li>
        </ul>
    </div>
</div>

然后用这个 css 修复它：

.droptoggle {
/*
  float: right;
  display: flex;
*/
  padding-top: 13px;
  padding-right: 15px;
  position: absolute;
  top: 0;
  right: 0;
}

.dropdown:hover,
.droptoggle:hover + .dropdown {
  display: block;
}

答案 2 :(得分：0)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #36363c;
}

.tbback {
  height: 65px;
  width: 100%;
  background: #2d2d33;
}

.navtext li {
  display: inline;
  padding: 25px;
}

.navtext a {
  text-decoration: none;
  color: #cfcfcf;
  font-family: "Teko", sans-serif;
  font-size: large;
  transition: all 0.2s linear;
}

.navtext a:hover {
  color: #712889;
}

.navtext {
  text-align: center;
  padding-right: 10px;
  padding-top: 21px;
  width: 100%;
  position: relative;
}

.navtext i {
  padding-right: 5px;
}

.openapi {
  float: right;
  position: relative;
  z-index: 10;
  text-decoration: none;
  color: #cfcfcf;
  font-family: "Teko", sans-serif;
  font-size: large;
  padding-right: 10px;
  padding-top: 21px;
  transition: all 0.2s linear;
}

.openapi i {
  padding-right: 5px;
}

.openapi:hover {
  color: #30ee46;
}

.chatback {
  height: calc(100vh - 65px);
  width: 300px;
  background: #2d2d33;
  overflow: hidden;
  overflow-y: scroll;
  display: flex;
  flex-direction: column-reverse;
  float: left;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background: #44444b;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #494950;
}

.chatobject {
  text-decoration: none;
  color: #cfcfcf;
  font-family: "Source Code Pro", monospace;
  font-size: small;
  padding: 15px;
}

.droptoggle {
  float: right;
  display: flex;
  padding-top: 13px;
  padding-right: 15px;
}

.imground {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  border: 3px solid #ff54489c;
  z-index: 15;
}

.fas.fa-caret-down {
  color: white;
  text-decoration: none;
  padding-top: 13px;
  float: right;
  padding-left: 10px;
  z-index: 20;
}

.profilename {
  text-decoration: none;
  color: #cfcfcf;
  font-family: "Teko", sans-serif;
  font-size: large;
}

.userprop {
  padding-top: 23px;
  position: absolute;
  z-index: 11;
}

.userprop li {
  display: inline;
  padding-right: 10px;
}

.userprop i {
  padding-right: 4px;
}

.userprop a {
  text-decoration: none;
  color: #a8a8a8;
  font-family: "Teko", sans-serif;
  font-size: medium;
  transition: all 0.2s linear;
}

.proppos {
  float: right;
  padding-right: 250px;
}

.userprop a:hover {
  color: #ff5448;
}

.dropdown {
  
  margin-top: 5px;
  background: #2d2d33;
  padding-left: 10px;
  padding-right: 80px;
  border-radius: 5px;
  margin-right: 5px;
  margin-left:20px;
  padding-bottom: 20px;
  display: none;
  position: relative;
  z-index: 1;
}

.dropdown li {
  list-style-type: none;
  padding-top: 20px;
}

.dropdown a {
  text-decoration: none;
  color: #fff;
  font-family: "Cairo", sans-serif;
  font-size: 13px;
}

.dropdown i {
  padding-right: 10px;
  font-size: 15px;
}

.testing:hover > .dropdown {
  display: block;
  
}
.testing{
  float: right;
}
<div class="tbback">
    <div class="proppos">
        <ul class="userprop">
            <li><a href="#"><i class="fas fa-wallet"></i>DEPOSIT</a></li>
            <li><a href="#"><i class="fas fa-suitcase"></i>INVENTORY</a></li>
        </ul>
    </div>
  <div class="testing">
    <a href="#" class="droptoggle"><img class="imground" src="<?=$steamprofile['avatarmedium'];?>"><i class="fas fa-caret-down"></i></a>
  <div class="dropdown">
    <ul>
        <li><a href="#" style="color: #ff5448;"><i class="fas fa-user"></i><?=$steamprofile['personaname'];?></a></li>
        <li><a href="#" style="color: #30ee46;"><i class="fas fa-gift"></i>Rewards</a></li>
        <li><a href="#"><i class="fas fa-book"></i>Blog</a></li>
        <li><a href="#"><i class="fas fa-question-circle"></i>Support</a></li>
        <li><a href="#"><i class="fas fa-info-circle"></i>Info</a></li>
        <li><a href="steamauth/logout.php"><i class="fas fa-sign-out-alt"></i>Logout</a></li>
    </ul>
</div>
    </div>
    
    <ul class="navtext">
        <li><a href="#"><i class="fas fa-sync-alt"></i>TRADE</a></li>
        <li><a href="#"><i class="fas fa-shopping-cart"></i>SHOP</a></li>
        <li><a href="/pages/premium.html" style="color: #ffe063;"><i class="fas fa-crown"></i>PREMIUM</a></li>
        <li><a href="#" style="color: #30ee46;"><i class="fas fa-gift"></i>GIVEAWAYS</a></li>
    </ul>
</div>

    <!---DEPO--->
    <!---CHAT--->
 <div class="chatback">
    <div class="chatscroll">
        <div class="chatobject">
        </div>
    </div>
</div>

相关问题
最新问题