我试图借助bootstrap dropdown创建一个简单的dropdown。
我包含了所有文件，并且在某些地方运行良好，但是在几页中，当我单击3个点时，应该打开下拉菜单，但没有显示任何内容。当我按下向下键时，选项弹出。
我认为那是东西，z-index乱七八糟。因此，我尝试放入Z-index:100;，但没有达到我的目的。所以必须把东西放在这里。
在此先感谢您愿意提供帮助的人。我的代码是这样的。
<span class="pull-right dropdown" >
<a href="#" lass="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-circle" style="font-size:7px;"></i>
<i class="fa fa-circle" style="font-size:7px;"></i>
<i class="fa fa-circle" style="font-size:7px;"></i>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel" style="width:160px; right:14px;">
<li><a style="width:155px;" href="edit_blog.php?b=<?php echo base64_encode($blog_id); ?>" target="_blank">Edit Blog</a></li>
<li><a style="width:155px;" href="javascript:void(0);" class="delete_blog" id="delete_blog-<?php echo $blog_id;?>">Delete Blog</a></li>
</ul>
</span>
如果由于不包括正确的文件而使事情变得混乱，这些是我包括的文件：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
https://jsfiddle.net/hantr01n/
最佳答案
.container {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
.container a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
.container a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#news">Link</a>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>你需要试试这个