【发布时间】：2021-09-17 08:28:58
【问题描述】：
我正在尝试使用引导程序构建一个带有下拉菜单的导航栏。 但是当我单击内容按钮时，下拉菜单不起作用。我想我已经在正确的地方的代码中包含了引导 CDN 链接、引导 css 链接、css 链接和 jquery 链接。 我添加了一点 CSS
我现在会放一个视频链接，但稍后我会添加另一个页面。我想要一个点击下拉动作
这是一个sn-p
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>topMenu</title>
<link rel="stylesheet" type="text/css" href="../resources/css/topMenu.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<li class="logo"><a href="${path}/#home"><img src="../resources/css/frontLogo.png" ></a></li>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="item"><a href="${path }/#home"><b>Home</b></a></li>
<li class="item"><a href="${path }/#about">About</a></li>
<li class="item"><a href="${path}/news/newsList">News</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Contents
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="https://www.youtube.com/channel/UCMpp2Ln-XtD36-iUL3Yd1rw" target="_blank">Videos</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
</body>
</html>
CSS 在这里：
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: sans-serif;
background: rgb(13,13,13);
}
.navbar {
background: rgb(27, 27, 27);
}
.nav li > a {
color: white !important;
}
a:hover {
text-decoration: underline;
}
.logo img{
margin-top:5px;
margin-left:-5px;
display:block;
width:50px;
}
#myNavbar {
font-size: 15px;
}
【问题讨论】：
-
你能解释一下吗？下拉菜单中应该包含什么？ yt 视频链接？
-
你想要点击或悬停下拉动作吗？
-
我现在会放一个视频链接，但我稍后会添加另一个页面。我想要一个点击下拉动作
-
quanzhanketang.com/howto/howto_js_dropdown.html 在这里查看。尝试遵循它很容易
-
当我删除 和 时它工作
标签： html css twitter-bootstrap twitter-bootstrap-3