gpt4 book ai didi

css - Bootstrap Navbar 下拉菜单背景颜色和悬停激活

转载 作者:太空宇宙 更新时间:2023-11-04 11:37:03 25 4
gpt4 key购买 nike

我想让导航栏下拉菜单在悬停时激活,并在激活时更改下拉菜单“按钮”的背景颜色。

这是我的导航栏 html:

<!-- Navigation -->
<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
<!-- Container makes the navbar extend across the whole screen, removing the default curved sides -->
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project Pandora</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<% if defined?(Devise) %>
<% if user_signed_in? %>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Account <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><%= link_to "Edit Account", edit_user_registration_path %></li>
<li class="divider"></li>
<li><%= link_to "Sign Out", destroy_user_session_path, method: :delete %></li>
</ul>
</li>
<% else %>
<li><%= link_to "Login", new_user_session_path %></li>
<li><%= link_to "Sign Up", new_user_registration_path %></li>
<% end %>
<% end %>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- container-collapse -->
</nav>

非常感谢。如果您希望我澄清任何事情,请告诉我。

最佳答案

对于第一个问题 - 悬停时激活的导航栏下拉菜单 - 检查来自 vanburenx 的链接。

如果你想改变下拉菜单的背景颜色——

ul.dropdown-menu{
background-color: tomato;

关于css - Bootstrap Navbar 下拉菜单背景颜色和悬停激活,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31665531/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com