Question

我正在编写一个代码来通过css-Dropdown创建一个导航栏菜单，但此时我已经被困在这里了。每当我点击＆＃34; Dropdown＆＃34;我无法获得所需的菜单栏，但是在移除＆＃34;位置：亲属＆＃34;在尖头位置给出正确的结果。我原始代码的问题是什么？

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

        }

如果我删除＆＃34; position：relative＆＃34;从下面我可以获得导航栏菜单

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

Answer 1

您需要从overflow:hidden中移除<ul>，这就是隐藏下拉内容的内容，并使用display:inline-block上的<li>代替浮动

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

2 个答案: