Question

我试图制作一个下拉菜单，当我将鼠标悬停或单击菜单栏中的图库时，该菜单会扩展。我以为自己知道自己在做什么，但是没有用，所以很明显我在做错事。如果有人看到我的错误，请告诉我。

这是我目前拥有的：

#menubar {
  width: 100%;
  height: 100%;
  background-color: white;
  position: relative;
}

#options {
  list-style-type: none;
  position: absolute;
  right: 15px;
  bottom: 1%;
  font-family: 'Montserrat', 'sans-serif';
  font-weight: 900;
  font-size: 2vw;
}

li {
  display: inline;
}

#options-gallery {
  padding: 5px;
  padding-right: 15px;
  padding-left: 15px;
  color: black;
  text-decoration: none;
}

#options-gallery:hover #galleries {
  display: grid;
}

a:link {
  padding: 5px;
  padding-right: 15px;
  padding-left: 15px;
  color: black;
  text-decoration: none;
}

a:active {
  background-color: #EFEFEF;
  padding: 5px;
  padding-right: 15px;
  padding-left: 15px;
  color: black;
  text-decoration: none;
  border-radius: 50px;
}

a:visited {
  padding: 5px;
  padding-right: 15px;
  padding-left: 15px;
  color: black;
  text-decoration: none;
}

a:hover {
  background-color: #EFEFEF;
  padding: 5px;
  padding-right: 15px;
  padding-left: 15px;
  border-radius: 50px;
  text-decoration: none;
}

#galleries {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  z-index: 30;
  position: absolute;
  left: 0px;
  top: 0px;
}

#gallery-videos {
  background-color: #EFEFEF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', 'sans-serif';
  animation: entranceAnimation 0.5s forwards 0.5s linear;
}

#gallery-videos a {
  position: absolute;
  display: block;
  width: 33.33%;
  height: 100%;
  z-index: 35;
}

#gallery-design {
  background-color: #00CC52;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', 'sans-serif';
  animation: entranceAnimation 0.5s forwards 0.4s linear;
}

#gallery-design a {
  position: absolute;
  display: block;
  width: 33.33%;
  height: 100%;
  z-index: 35;
}

#gallery-other {
  background-color: #0541D8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', 'sans-serif';
  animation: entranceAnimation 0.5s forwards 0.3s linear;
}

#gallery-other a {
  position: absolute;
  display: block;
  width: 33.33%;
  height: 100%;
  z-index: 35;
}

@keyframes entranceAnimation {
  0% {
    transform: translateY(-150%);
    opacity: 1;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

<div id="menubar" style="width: 100%">
  <div id="options">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li id="options-gallery">Gallery</li>
      <li><a href="index.html">Contact</a></li>
    </ul>
  </div>
</div>
<div id="galleries">
  <div id="gallery-videos">
    <a href="gallery-videos"></a>
    <h1>Videos</h1>
  </div>
  <div id="gallery-design">
    <a href="gallery-design"></a>
    <h1>Design</h1>
  </div>
  <div id="gallery-other">
    <a href="gallery-other"></a>
    <h1>Other</h1>
  </div>
</div>

Answer 1

我不确定注释中的链接是否会永远持续下去，因此，如果您想回头看看以供参考，这里是答案：

html,
body,
.flex {
  height: 100%;
}

body {
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  /*change font family*/
  margin: 0;
}

.navbar {
  overflow: hidden;
  background-color: #ccc;
  /*change color*/
}

.navbar .navlink {
  float: left;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  /*change font size*/
  padding: 14px 16px;
  /*change padding*/
  color: black;
  /*change text color */
}

.subnav {
  float: left;
  overflow: hidden;
}

.subnav .subnavbtn {
  margin: 0;
  border: none;
  outline: none;
  background-color: inherit;
  font-family: inherit;
  cursor: pointer;
  padding: 14px 16px;
  /*change padding*/
  font-size: 16px;
  /*change font size*/
}

.navbar .navlink:hover,
.subnav:hover .subnavbtn {
  background-color: lightgreen;
  /*change color*/
}

.subnav-content {
  position: absolute;
  display: none;
  width: 100%;
  z-index: 1;
  opacity: 0;
  left: 0;
  background-color: lightblue;
  /*change color*/
}

#galleries {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.gallery {
  width: 100%;
  align-items: center;
  justify-content: center;
}

#g-videos {
  background-color: #EFEFEF;
}

#g-design {
  background-color: #00CC52;
}

#g-other {
  background-color: #0541D8;
}

.subnav-content a {
  text-decoration: none;
  color: black;
}

.subnav:hover .subnav-content {
  display: flex;
  opacity: 1;
}

.subnav:hover #g-videos {
  animation: entranceAnimation .6s forwards;
}

.subnav:hover #g-design {
  animation: entranceAnimation .5s forwards;
}

.subnav:hover #g-other {
  animation: entranceAnimation .4s forwards;
}

@keyframes entranceAnimation {
  0% {
    transform: translateY(-150%);
  }
  100% {
    transform: translateY(0px);
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar">
  <a href="#home" class="navlink">Home</a>
  <div class="subnav">
    <button class="subnavbtn">Gallery</button>
    <div class="subnav-content flex">

      <div id="galleries">
        <div id="g-videos" class="gallery">
          <h1><a href="#">Videos</a></h1>
        </div>
        <div id="g-design" class="gallery">
          <h1><a href="#">Design</a></h1>
        </div>
        <div id="g-other" class="gallery">
          <h1><a href="#">Other</a></h1>
        </div>
      </div>

    </div>
  </div>
  <a href="#contact" class="navlink">Contact</a>
</div>

悬停上的下拉菜单

1 个答案: