Question

我为我的页面http://test.hkkkki.eu/的按钮下拉列表添加了以下代码，这里是代码段：

    .dropbtn {
        background-color: #ff4e39;
        color: white;
        padding: 0px 16px 0px 6.4px;
        font-size: 16px;
        border: none;
    	font-family: 'Josefin Sans',Helvetica,Arial,Lucida,sans-serif;
    	transition: all 0.5s ease;
    }
    
    .dropdown {
        position: relative;
        display: block;
    }
    
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #fff;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }
    
    .dropdown-content a {
        color:#fff;
    	background-color:#ff4e39;
        text-decoration: none;
        display: block;
    }
    
    .dropdown-content a:hover { color:#000; transition: all 0.5s ease;}
    
    .dropdown:hover .dropdown-content {
        display: block;
    }
    
    .dropdown:hover .dropbtn {
        background-color: #ff4e39;}

    <div class="dropdown">
      <button class="dropbtn">press</button>
      <div class="dropdown-content">
        <a href="#">priopćenja</a>
        <a href="#">foto</a>
        <a href="#">video</a>
        <a href="#">iz medija</a>
      </div>
    </div>

结果不好，因为在尝试选择子菜单选项时下拉列表会消失。它也不在以下内容之上。这可能是由于Z-index，但我尝试了几个以上的地方，但它没有用。非常感谢任何帮助。

Answer 1

当我去your website时，我可以看到你的意思。我无法在您的代码中完全看到问题，但似乎下拉菜单标题为＆＃39; press＆＃39;工作得很好，你使用相同的类来引用下拉菜单吗？很高兴看到你创建“按”的方式。下拉，以便我们可以比较，看看出了什么问题。

无论这是我能做的最好的事情。 w3schools has a very handy tutorial on everything you need to make a hoverable drop down。 以下是尝试回答您问题的摘要：

＆＃13;

/* Dropdown Button */

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}


/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
}


/* Dropdown Content (Hidden by Default) */

.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;
}


/* Links inside the dropdown */

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #ddd
}


/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
}


/* Change the background color of the dropdown button when the dropdown content is shown */

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

＆＃13;

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

＆＃13;

按钮下拉菜单消失

1 个答案: