Question

我正在尝试制作一个下拉菜单，一旦您将鼠标悬停在名为“锦标赛”的菜单项上，它就会显示图像，但它似乎不起作用。

我怀疑这些 CSS 说明可能有问题：

.menu ul li .submen
.menu ul li: hover .submen

但我无法识别错误。

这是导航 CSS 和 HTML：

.menu_wrap{
  width: 100%;
}

.menu{
  width: 100%;
  height: 100px;
}

.menuimg a img{
  height: 100px;
  width: auto;
}

.menu ul{
  width: 100%;
  height: 100%;
  background: #282933;
  text-align: center;
  line-height: 50px;
  position: relative;
}

.menu ul li{
  display: inline-block;
  margin: 0 15px;
  padding: 0 10px 0 10px;
}

.menu ul li a{
  text-decoration: none;
  color: #d43a5b;
  text-transform: uppercase;
  font-weight: bolder;
  letter-spacing: 2px;
  display: block;
}

.menu ul li .submen{
  position: absolute;
  background-color: #c2c2c2;
  width: 80%;
  right: 10%;
  padding: 25px 15px;
  display: flex;
  justify-content: space-around;
  line-height: 20px;
  visibility: hidden;
}

.menu ul li: hover{
  background: #169cc3; 
}

.menu ul li: hover .submen{
  visibility: visible; 
}

.submen .col img{
  width: auto;
  height: 200px;
}

<!DOCTYPE html>
<html>
<head>
  <title>Home</title>
  <link rel="stylesheet" type="text/css" href="css/layers.css">
  <link rel="stylesheet" type="text/css" href="css/style1.css">
  <link rel="stylesheet" type="text/css" href="css/tacks1.css">
</head>

<body>
  <div class="container">
    <div class="menu_wrap">
    <div class="menu">
      <div class="menuimg">
        <a href="index.php"><img src="Images/dragon.png"></a>
      </div>
      <nav class="navv">
        <div  class="navup">
          <ul>
            <li><a href="Login.php">Log In</a></li>
            <li><a href="signup.php">Sign Up</a></li>
          </ul>
        </div>
        <div class="navdown">
          <ul>
            <li><a href="tickets.php">Tickets</a></li>
            <li><a href="tournaments.php">Tournaments</a></li>
              <div class="submen">
                <div class="col">
                  <img src="images/dragon2.png">
                  <h5>Tournament</h5>
                </div>
                <div class="col">
                  <img src="images/dragon2.png">
                  <h5>Tournament</h5>
                </div>
                <div class="col">
                  <img src="images/dragon2.png">
                  <h5>Tournament</h5>
                </div>
              </div>
            <li> <a href="#">Players</a></li>
            <li><a href="Meritorder.php">Meritorder</a></li>
            <li><a href="sponsers.php">Sponsers</a></li>
            <li><a href="about.php">About SAKDC</a></li>
          </ul>
        </div>  
      </nav>
    </div>
  </div>
    <!-- All content____________________________________________________________________-->
  <div class="bodystuff">

Answer 1

你可以试试这个..

在 <li></li> 标签内写入子菜单代码。
不要在标签和悬停之间留空格 .menu ul li: hover 而是尝试 .menu ul li:hover

.menu_wrap{
  width: 100%;
}

.menu{
  width: 100%;
  height: 100px;
}

.menuimg a img{
  height: 100px;
  width: auto;
}

.menu ul{
  width: 100%;
  height: 100%;
  background: #282933;
  text-align: center;
  line-height: 50px;
  position: relative;
}

.menu ul li{
  display: inline-block;
  margin: 0 15px;
  padding: 0 10px 0 10px;
}

.menu ul li a{
  text-decoration: none;
  color: #d43a5b;
  text-transform: uppercase;
  font-weight: bolder;
  letter-spacing: 2px;
  display: block;
}

.menu ul li .submen{
  position: absolute;
  background-color: #c2c2c2;
  width: 80%;
  right: 10%;
  padding: 25px 15px;
  display: flex;
  justify-content: space-around;
  line-height: 20px;
  visibility: hidden;
}

.menu ul li:hover{
  background: #169cc3; 
}

.menu ul li:hover .submen{
  visibility: visible; 
}

.submen .col img{
  width: auto;
  height: 200px;
}

<div class="container">
          <div class="menu_wrap">
          <div class="menu">
            <div class="menuimg">
              <a href="index.php"><img src="Images/dragon.png"></a>
            </div>
            <nav class="navv">
              <div  class="navup">
                <ul>
                  <li><a href="Login.php">Log In</a></li>
                  <li><a href="signup.php">Sign Up</a></li>
                </ul>
              </div>
              <div class="navdown">
                <ul>
                  <li><a href="tickets.php">Tickets</a></li>
                  <li>
                       <a href="tournaments.php">Tournaments</a>
                       <div class="submen">
                         <div class="col">
                           <img src="images/dragon2.png">
                           <h5>Tournament</h5>
                         </div>
                         <div class="col">
                           <img src="images/dragon2.png">
                           <h5>Tournament</h5>
                         </div>
                         <div class="col">
                           <img src="images/dragon2.png">
                           <h5>Tournament</h5>
                         </div>
                       </div>
               </li>
                  <li> <a href="#">Players</a></li>
                  <li><a href="Meritorder.php">Meritorder</a></li>
                  <li><a href="sponsers.php">Sponsers</a></li>
                  <li><a href="about.php">About SAKDC</a></li>
                </ul>
              </div>  
            </nav>
          </div>
        </div>
     </div>

我的下拉导航栏不起作用

1 个答案: