悬停内容未显示在下拉菜单中（网页设计）

Question

我正在编写网页，但下拉菜单按钮不起作用。悬停内容未显示。谁能告诉我原因，拜托。非常感谢！！！

这是代码

        * {
            box-sizing: border-box;
            font-family: Arial, Helvetica, sans-serif;
        }

        h1.header {
            text-align: center;
            color: #66F3ED;
        }

        body {
            margin: 0;
        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #808080;
            height: 70px;
            font-size: 18px;
        }
        li {
            float: left;
            height: 70px;
        }
        li:last-child {
                border-bottom: none;
            }
        li a {
                display: block;
                color: #66f3ed;
                text-align: center;
                padding: 23px 60px;
                text-decoration: none;
            }
        li a:hover:not(.active) {
             background-color: #111;
        }

        .active {
            background-color: #808080;
            border-bottom: 5px solid #66f3ed;
        }

        /* Create three unequal columns that floats next to each other */
        .column {
            float: left;
            height: 800px;
        }
        /* Left and right column */
        .column.side {
                width: 6%;
                background-color: #868686;
                overflow: hidden;
                z-index:2;
        }
        /* Middle column */
        .column.middle {
            width: 70%;
            background-color: #777777;
            z-index:1;
        }
        .column.right {
            width: 24%;
            background-color: #919191;
        }
        /* Clear floats after the columns */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }

 /*Drop down Menu*/
 .dropbtn {
  background-color: transparent;
  color: #66F3ED;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  display: inline-block;
  z-index: 10!important;
}

.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;
  left:100%;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


        /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
        @media screen and (max-width: 600px) {
            .column.side, .column.middle {
                width: 100%;
            }
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Website Layout</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="row">
        <!--Side Menu Bar-->
        <div class="column side">
            <div class="dropdown">
                <button class="dropbtn"><img src="Menu/Menu-1.png" style="width: 100%" alt="Menu"></button>
            </div>
            
            <br /><br />
            <img src="menu.jpg" alt="Menu">
        </div>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
        </div>
        <div class="column middle">
            <ul>
               <li><img src="sa_crop.gif" style="height: 70px"alt="Logo"></li> 
                <li><a class="active" href="#home">Face Mask Detection</a></li>
                <li><a href="#news">Social Distance Detection</a></li>
            </ul>
            <br /><h1 class="header">Face Mask Detection</h1><br />
            <!--Face Mask Detection Area-->
        </div>

        <div class="column right">
            <ul>
                <li style="float:right"><img src="user_808080.jpg" style="height: 70px" alt="User"></li> 
            </ul>
         
         </div>
    </div>

</body>
</html>

整个编码如上所示。我不确定问题所在，但应该是 CSS 样式问题。请有人给我提示。非常感谢！

Answer 1

您的 HTML 和 CSS 中都有几个问题需要解决，因此菜单将正常工作。

首先： <div class="dropdown"> 应该在 </div>

中包含按钮、图像和下拉内容

例如，更改：

        <div class="column side">
            <div class="dropdown">
                <button class="dropbtn"><img src="Menu/Menu-1.png" style="width: 100%" alt="Menu"></button>
            </div>
            
            <br /><br />
            <img src="menu.jpg" alt="Menu">
        </div>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
        </div>

至

           <div class="column side">
                <div class="dropdown">
                    <button class="dropbtn"><img src="Menu/Menu-1.png" style="width: 100%" alt="Menu"></button>
              
                    <br /><br />
                    <img src="menu.jpg" alt="Menu">
                    <div class="dropdown-content">
                        <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                    </div>
                </div>
          </div>

其次：在.dropdown-content的风格中，使用position: absolute;是正确的，但你应该将left:100%;改为left:0;，因此您会在菜单项旁边获得下拉内容。

第三： 添加 CSS 悬停在菜单项上的样式代码，使子菜单项显示为：

    .dropdown:hover .dropdown-content{
      display: block;
    }

第四： 更改悬停时子菜单项的背景，例如

    .dropdown-content a:hover {
      color: white;
      background-color: red;
    }

如果你做到了以上四点，菜单就会正常运行。

这里是问题的完整修改代码 - 只需按下面的 Run the code snippet：

        * {
            box-sizing: border-box;
            font-family: Arial, Helvetica, sans-serif;
        }

        h1.header {
            text-align: center;
            color: #66F3ED;
        }

        body {
            margin: 0;
        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #808080;
            height: 70px;
            font-size: 18px;
        }
        li {
            float: left;
            height: 70px;
        }
        li:last-child {
                border-bottom: none;
            }
        li a {
                display: block;
                color: #66f3ed;
                text-align: center;
                padding: 23px 60px;
                text-decoration: none;
            }
        li a:hover:not(.active) {
             background-color: #111;
        }

        .active {
            background-color: #808080;
            border-bottom: 5px solid #66f3ed;
        }

        /* Create three unequal columns that floats next to each other */
        .column {
            float: left;
            height: 800px;
        }
        /* Left and right column */
        .column.side {
                width: 6%;
                background-color: #868686;
                overflow: hidden;
                z-index:2;
        }
        /* Middle column */
        .column.middle {
            width: 70%;
            background-color: #777777;
            z-index:1;
        }
        .column.right {
            width: 24%;
            background-color: #919191;
        }
        /* Clear floats after the columns */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }

 /*Drop down Menu*/
 .dropbtn {
  background-color: transparent;
  color: #66F3ED;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  display: inline-block;
  z-index: 10!important;
}

.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;
  left:0;    /* Modified */
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* adding */
.dropdown:hover .dropdown-content{
  display: block;
}

/* adding */
.dropdown-content a:hover {
  color: white;
  background-color: red;


        /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
        @media screen and (max-width: 600px) {
            .column.side, .column.middle {
                width: 100%;
            }
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Website Layout</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="row">
        <!--Side Menu Bar-->
        <div class="column side">
            <div class="dropdown">
                <button class="dropbtn"><img src="Menu/Menu-1.png" style="width: 100%" alt="Title"></button>
          
            <br /><br />
            <img src="menu.jpg" alt="MenuItem">
            <div class="dropdown-content">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
            </div>
            </div>
      </div>
          <div class="column middle">
            <ul>
               <li><img src="sa_crop.gif" style="height: 70px"alt="Logo"></li> 
                <li><a class="active" href="#home">Face Mask Detection</a></li>
                <li><a href="#news">Social Distance Detection</a></li>
            </ul>
            <br /><h1 class="header">Face Mask Detection</h1><br />
            <!--Face Mask Detection Area-->
        </div>

        <div class="column right">
            <ul>
                <li style="float:right"><img src="user_808080.jpg" style="height: 70px" alt="User"></li> 
            </ul>
         
         </div>
    </div>

</body>
</html>

悬停内容未显示在下拉菜单中（网页设计）

Hover Content is not showing in Drop Down Menu (Web Design)

html

css

drop-down-menu