使用 css 激活下拉菜单

我用css制作了一个下拉菜单，我想通过将鼠标悬停在菜单按钮上来激活它，它工作得很好。但问题是，当我将鼠标悬停在菜单按钮下拉菜单下方时，再次激活，我不希望这样。这是我的HTML和CSS，每一个帮助将不胜感激。

PS 抱歉，如果您发现一些错别字英语不是我的母语。

@charset "UTF-8";
 body {
  background-image: url(../images/home.jpg);
  background-repeat: no-repeat;
  height: 100%;
}
* {
  list-style: none;
  text-decoration: none;
  margin: 0px;
  padding: 0px;
}
.container {
  width: 1000px;
  height: 100%;
  margin: 0px auto;
}
nav ul a {
  color: white;
}
nav ul {
  width: 100px;
  height: 30px;
  margin: 270px 460px;
  padding-top: 15px;
  padding-bottom: 5px;
  background-color: #52b3d9;
  text-align: center;
  color: white;
  border-radius: 20px;
}
nav ul li {
  width: 100px;
  height: 30px;
  padding-top: 15px;
  padding-bottom: 5px;
  background-color: #52b3d9;
  margin-top: 5px;
  position: relative;
  top: 17px;
  opacity: 0;
  transition: opacity 1s;
  -webkit-transition: opacity 1s;
  text-align: center;
  color: white;
  border-radius: 20px;
}
nav ul:hover li {
  opacity: 1;
}
nav ul li:hover a {
  border-bottom: 2px solid white;
}
li:hover {
  background-color: #19B5FE;
  border-bottom: 2px solid #434141;
}
ul:hover {
  background-color: #19B5FE;
  border-bottom: 2px solid #434141;
}

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Your Website!</title>
  <link rel="stylesheet" type="text/css" href="css/screen_styles.css" />
  <img id="logo" url(../images/Your_Logo.png) />
</head>
<body>
  <div class="container">
    <nav>
      <ul><a href="#">HOME</a>
        <li><a href="#">About Us</a>
        </li>
        <li><a href="#">Why Us</a>
        </li>
        <li><a href="#">Products</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
      </ul>
    </nav>
  </div>
</body>
</html>

试试这个对你的代码做了一些 css 更改。请参阅溢出隐藏更改。

nav ul{
  list-style-type:none;
  transition:all 0.3s;
  max-height:50px;
  overflow:hidden;
  width:120px;
  padding:0px;
  }
nav ul li{
  height:30px;
  width:100px;
  padding:10px;
  margin-top:5px;
  background:teal;
  text-align:center;
  cursor:pointer;
  transition:all 0.3s;
  }
nav ul li a{
  color:white;
  font-family:'segoe ui';
  text-decoration:none;
  }
nav ul li:hover{
  background:yellowgreen;
  }
nav ul li:not(:first-child){
  opacity:0;
  }
nav ul:hover{
  max-height:600px;
  }
nav ul:hover li{
  opacity:1;
  }

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Your Website!</title>
  <link rel="stylesheet" type="text/css" href="css/screen_styles.css" />
  <img id="logo" url(../images/Your_Logo.png) />
</head>
<body>
  <div class="container">
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a>
        </li>
        <li><a href="#">Why Us</a>
        </li>
        <li><a href="#">Products</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
      </ul>
    </nav>
  </div>
</body>
</html>

相关内容

最新更新

热门标签：