問題が発生しました。ホバー メニューの何が問題なのかわかりませんが、消えるのが早すぎます。
<div class="dropdown">
<li class="nav-item log-main">
<a href="#" class="nav-link" data-toggle="dropdown">Member</a>
<ul class=" dropdown-menu log">
<li><a href="sign_in.html" class="dropdown-item">Sign up</a></li>
<li><a href="log_in.html" class="dropdown-item">Log in</a></li>
</ul>
</li>
</div>
CSS:
.navbar .nav-item ul.log{
display: none;
list-style-type:none;
}
.navbar .dropdown-menu:hover ul.log{
display: block;
}
.log a{
color:var(--main-text-color);
font-family:var(--main-text-font);
font-size: 24px;
}
マウスをリンクから外すとホバーがなくなり、非表示になるため
– エパスカレロ
2020 年 9 月 3 日 3:12
1
達成したいことをより具体的にしてください。
– ビンゴシチュー
2020 年 9 月 3 日 3:17
これは、ホバー メニューの親要素で CSS の :hover 疑似クラスのみを使用する場合の主な制限です。 @keyframes アニメーションやスクリプトを使用すると、ネイティブ OS メニューと同じように動作させることができます。
– ダイ
2020 年 9 月 3 日 3:19
1
関連する CSS をすべて追加してください& HTML。あなたが提供した現在のコードでは、ホバー効果も作成されていません。
– ゴシ
2020 年 9 月 3 日 3:20
「消えるのが早すぎる」とはどういう意味ですか?メニューに問題があるということでしょうか？消えてはいけないときに消えてしまいますか、それともアニメーションの表示/非表示を遅くしますか?
– ふわふわ子猫
2020 年 9 月 3 日 3:44
------------------------
:hover pseud を使用する必要がありますo .log-main:hover のクラス。.dropdown-menu となる次の UL を表示します。
ライブデモ:
.navbar .nav-item ul.log {
display: none;
list-style-type: none;
}
.log-main:hover .dropdown-menu {
display: block;
margin-top: 0;
}
.log a {
color: var(--main-text-color);
font-family: var(--main-text-font);
font-size: 24px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="dropdown">
<li class="nav-item log-main">
<a href="" class="nav-link" data-toggle="dropdown">Member</a>
<ul class="dropdown-menu log">
<li><a href="https://stackoverflow.com/questions/63716208/sign_in.html" class="dropdown-item">Sign up</a></li>
<li><a href="https://stackoverflow.com/questions/63716208/log_in.html" class="dropdown-item">Log in</a></li>
</ul>
</li>
</div>
------------------------
表示される要素と非表示のドロップダウンにホバーを追加する必要があります。
.dropdown:hover .dropdown-menu,
.dropdown .dropdown-menu:hover{
display: block;
position: absolute;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="">Navbar</a>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="">Action</a>
<a class="dropdown-item" href="">Another action</a>
<a class="dropdown-item" href="">Something else here</a>
</div>
</li>
</ul>
</nav>
