由于 css 位置存在一些错误，无法显示下拉菜单栏

我正在编写代码以通过css-Dropdown创建导航栏菜单，但此时我被困在这里。每当我单击"下拉列表"时，我都无法获得所需的菜单栏，但是在指向位置删除"位置：相对"会给出正确的结果。我的原始代码有什么问题？

<!DOCTYPE html>
<html>
<head>
    <style>
        ul{
            list-style-type: none;
            margin:0;
            padding:0;
            overflow: hidden;
            width: 100%;
            background-color: #333;
        }
        li{
            float: left;
        }
        li a, .dropbutton{
            text-decoration: none;
            color: white;
            padding: 12px 16px;
            display:  inline-block;
            border: none; /* x */
            text-align: center;
        }
        li a:hover , .dropdown:hover .dropbutton
        {
            background-color:black;
        }

如果我从下面删除"位置：相对"，那么我就可以获得导航栏菜单

        .dropdown{
           position: relative;  /* remove */
            display: inline-block;
        }
        .dropdown_content {
            display: none;
            background-color: #444;
         position: absolute;
            color: white;
            box-shadow: 0 12px 16px 0px rgba(0,0,0,0.7);
            text-align: center; 
            z-index: 1;            
        }
        .dropdown_content a{
             color: black;
             padding: 12px 16px;
             text-decoration: none;
             display: block;
        }
        .dropdown:hover .dropdown_content{
            display: block;
        }
        .dropdown_content a:hover{
            background-color: silver;
        }
        </style>
</head>
<body>

    <ul>
        <li><a href="#jfjkwj">Home</a></li>
        <li><a href="#jfjkwj">Home</a></li>
        <li><a href="#jfjkwj">Home</a></li>
        <li><a href="#jfjkwj">Home</a></li>
        <li class="dropdown">
            <a href="javascript:void(0)" class="dropbutton">Dropdown</a>
            <div class="dropdown_content">
                <a href="#nkkje">okay</a>
                <a href="#nkkje">okay</a>
                <a href="#nkkje">okay</a>
            </div>
        </li>
            </li>
    </ul>
</body>
</html>

您需要

从<ul>中删除overflow:hidden，这就是隐藏下拉内容的原因，并在<li>上使用display:inline-block而不是浮动

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #333;
}
li {
  display:inline-block;
}
li a,
.dropbutton {
  text-decoration: none;
  color: white;
  padding: 12px 16px;
  display: inline-block;
  border: none;
  /* x */
  text-align: center;
}
li a:hover,
.dropdown:hover .dropbutton {
  background-color: black;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown_content {
  display: none;
  background-color: #444;
  position: absolute;
  color: white;
  box-shadow: 0 12px 16px 0px rgba(0, 0, 0, 0.7);
  text-align: center;
  z-index: 1;
}
.dropdown_content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown:hover .dropdown_content {
  display: block;
}
.dropdown_content a:hover {
  background-color: silver;
}

<ul>
  <li><a href="#jfjkwj">Home</a></li>
  <li><a href="#jfjkwj">Home</a></li>
  <li><a href="#jfjkwj">Home</a></li>
  <li><a href="#jfjkwj">Home</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbutton">Dropdown</a>
    <div class="dropdown_content">
      <a href="#nkkje">okay</a>
      <a href="#nkkje">okay</a>
      <a href="#nkkje">okay</a>
    </div>
  </li>
  </li>
</ul>

您在ul选择器上overflow:hidden，这意味着在ul之外不会显示任何内容。

相关内容

最新更新

热门标签：