html - CSS 无法生成下拉菜单链接
问题描述
我正在尝试在我的主菜单中创建一个下拉按钮，但我不知道出了什么问题。我尝试了很多例子，但没有一个奏效。谁能帮我制作至少一个链接作为下拉列表？
顺便说一句，我尝试使用 .dropdownas id 和 class，但它仍然显示为内联。我还尝试了一些 w3school 示例。
导航栏 CSS
.header-nav {
background-color: rgba(0, , 6, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
left: 0;
height: 80px;
position: fixed;
top: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
width: 100%;
z-index: 999;
}
.header-nav.bg-color {
background-color: #fff;
}
.header-nav.menu-bg {
height: 56px;
}
/* menu */
.navbar-brand {
color: #fff;
font-size: 36px;
font-weight: bold;
line-height: 80px;
padding: 0;
text-transform: capitalize;
}
.header-nav.menu-bg .navbar-brand {
line-height: 56px;
}
.navbar-brand:hover {
color: #fff;
}
.navbar-brand > img {
height: 80px;
-webkit-transition: height 0.4s ease-in-out;
-moz-transition: height 0.4s ease-in-out;
-o-transition: height 0.4s ease-in-out;
transition: height 0.4s ease-in-out;
}
.menu-bg .navbar-brand > img {
height: 56px;
}
.bg-color .main-menu .navbar-nav li a {
color: #000;
}
.main-menu .navbar-nav li a {
color: #22a265;
font-size: 16px;
padding: 30px 20px;
text-transform: uppercase;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.menu-bg .main-menu .navbar-nav li a {
padding: 18px 15px;
color: #222;
}
.menu-bg .main-menu .navbar-nav li a:hover {
color: #fafafa;
}
.main-menu .navbar-nav li a:focus {
background-color: transparent;
}
.main-menu .navbar-nav li a:hover, .main-menu .navbar-nav li a.active {
color: #fff;
background-color: #04b962;
}
.menu-bg {
background-color: #fff;
box-shadow: 0 2px 10px -1px rgba(87, 97, 100, 0.35);
}
a img.logo-color {
opacity: 0;
height: 0;
}
.menu-bg a img.logo-white {
opacity: 0;
height: 0;
}
.menu-bg a img.logo-color {
opacity: 1;
}
.main-menu .navbar-nav li a.menubgactive {
background-color: #f0f0f0;
}
.main-menu .navbar-nav li a.menubgactive:hover {
background-color: #04b962;
}
/* navbar-toggle responsive menu */
.navbar-toggle {
border: none;
background: transparent;
}
.navbar-toggle.collapsed .icon-bar {
background-color: #04b962;
}
.navbar-toggle .icon-bar {
background-color: #e91313;
}
.navbar-toggle:hover {
background: transparent;
}
.navbar-toggle .icon-bar {
width: 32px;
height: 4px;
-webkit-transition:all 0.2s ease 0s;
-moz-transition:all 0.2s ease 0s;
-ms-transition:all 0.2s ease 0s;
-o-transition:all 0.2s ease 0s;
transition:all 0.2s ease 0s;
}
.navbar-toggle .top-bar {
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
opacity: 0;
}
.navbar-toggle .bottom-bar {
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
-moz-transform:rotate(0);
-webkit-transform:rotate(0);
-o-transform:rotate(0);
-ms-transform:rotate(0);
transform:rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
-moz-transform:rotate(0);
-webkit-transform:rotate(0);
-o-transform:rotate(0);
-ms-transform:rotate(0);
transform:rotate(0);
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
菜单html：
<div class="container">
<div class="row">
<div class="col-sm-12">
<nav class="main-menu">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img class="logo logo-white" src="images/logo.png" alt="logo">
<img class="logo logo-color" src="images/logo-color.png" alt="logo">
</a>
</div><!--End navbar-header -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#service">Service</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#pricingtable">Pricing</a></li>
<li><a href="#blog">Blog</a></li>
<li><a class="last" href="#contact">Contact</a></li>
</ul>
</div><!--End navbar -->
</nav>
</div><!--End col -->
</div><!--End row -->
</div><!--End container -->
解决方案
在你的头部部分添加这个 css
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">de here
然后在您的正文中添加此引导程序的导航代码，您可以根据需要对其进行自定义
<div class="container">
<div class="row">
<div class="col-sm-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div><!--End col -->
</div><!--End row -->
并在页脚中添加这些脚本文件而没有这些下拉菜单将不起作用
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
完成上述步骤后，您的菜单和下拉菜单将如下所示
推荐阅读
- python - 我可以从 Python 中的后台线程渲染 openCV 动画吗？
- html - 如何使用 html 下载文件而不是在 Google 云存储中查看
- php - 在 foreach 中获得通知
- html - 如何将数据从节点 js 传递到 html？
- azure - Azure/365 变化：查看 powershell 命令
- rest - 如何将我的简单 Web 应用程序连接到 Jena Fuseki 并返回 SPQRQL 结果
- tensorflow - tensorflow.js 中预测的输出概率
- docker - 在 docker 上更改 Cache-Control nginx 容器
- ios - 为什么在关闭动作栏的模式后重置动作栏？
- javascript - React Hook useEffect 缺少对 React 中 useState 设置器的依赖