html - 将动态导航菜单与下拉 block 相结合

Question

我有一个导航菜单，其中的元素旋转 90 度。我想将其与悬停在导航项上时显示的下拉 block 结合起来，以保持项的动态行为。

动态导航面板的关键CSS代码在这里:

.buttons-wrapper {
    display: block;
    text-align: center;
    margin-bottom: 20px;
}

.buttons {
    display: inline-flex;
    position: relative;
    width: 87%;
    text-decoration: none;
    cursor: pointer;   
}

.buttons>div {
    display: inline-flex;
    position: relative;
    width: 100%;
    height: 40px;
    margin: 0;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px; 
}

.buttons>div>a {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    height: 100%;
    position: relative;
    font-size: 18px!important;
    font-weight: bold!important;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(-20px);
    -moz-transform: translateZ(-20px);
    -ms-transform: translateZ(-20px);
    -o-transform: translateZ(-20px);
    transform: translateZ(-20px);
    -webkit-transition: -webkit-transform 0.25s;
    -moz-transition: -moz-transform 0.25s;
    transition: transform 0.5s;  
}

.buttons>div>a::before, .buttons>div>a::after {
    justify-content: center;
    align-items: center;
    margin: 0;
    width: 150px;
    height: 40px;
    padding-left: 10px;
    padding-right: 10px;
    position: absolute;
    border: 2px solid black;
    box-sizing: border-box;
    content: attr(title);
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}

.buttons>div>a::before {
    background-color: beige;
    color: #000;
    -webkit-transform: rotateY(0deg) translateZ(20px);
    -moz-transform: rotateY(0deg) translateZ(20px);
    -ms-transform: rotateY(0deg) translateZ(20px);
    -o-transform: rotateY(0deg) translateZ(20px);
    transform: rotateY(0deg) translateZ(20px);
}

.buttons>div>a::after {
    background-color: #002147;
    color: #fff;
    -webkit-transform: rotateX(90deg) translateZ(20px);
    -moz-transform: rotateX(90deg) translateZ(20px);
    -ms-transform: rotateX(90deg) translateZ(20px);
    -o-transform: rotateX(90deg) translateZ(20px);
    transform: rotateX(90deg) translateZ(20px);
}

.buttons>div>a:hover {
    -webkit-transform: translateZ(-20px) rotateX(-90deg);
    -moz-transform: translateZ(-20px) rotateX(-90deg);
    -ms-transform: translateZ(-20px) rotateX(-90deg);
    -o-transform: translateZ(-20px) rotateX(-90deg);
    transform: translateZ(-20px) rotateX(-90deg);
}

.buttons>div>a.selected::before {
    color: white;
    background-color: #002147;
}

为此，我想添加一个下拉菜单，如下所示:

.dropdown-content {
    display: none;
    background-color: #f9f9f9;
}

.dropdown-content a {
    font-size: inherit;
    font-weight:inherit;  
    display: block;
    background-color: beige;
    color: red;
}

.dropdown-content a:hover {background-color: #002147}

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

关键的 HTML 代码是:

  <div class="buttons-wrapper">
      <div class="buttons">
          <div id="b-h">
               <a class="selected" href="index.xhtml" title="HOME"></a>
          </div>
          <div id="b-a">
              <a href="about.xhtml" title="ABOUT"></a>
          </div>
          <div id="b-e">
              <a href="events.xhtml" title="EVENTS"></a>
          </div>
          <div class="R-dropdown">
              <a href="join.xhtml" title="RESOURCES"></a>
            <div class="dropdown-content">
              <a href="#">Econometrics</a>
              <a href="#">Macroeconomics</a>
              <a href="#">Other</a>
            </div>              
          </div>
          <div id="b-c">
              <a href="contact.xhtml" title="CONTACT US"></a> 
          </div>
      </div>
  </div>

你可以看到jsfiddle here .我无法让它工作。我可能需要将两种类型的元素(按钮包装器和下拉菜单组合成一个 css 项？目前它们是分开的。

Answer 1

替换

.buttons>div>a:hover

与

.buttons>div:hover>a

因为 div 包含您的下拉内容，悬停您的下拉内容仍会触发悬停