Question

我正在尝试使用bootstrap下拉列表创建一个简单的下拉列表。

我包含了所有文件，它在某些地方工作正常，但是在几页中，当我点击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/

Answer 1

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

你需要试试这个

即使按下上下键工作正常，bootstrap下拉也不起作用

1 个答案: