html - 如何创建悬停在背景图像上的下拉菜单？

Question

我是 html/css 的新手，我一直在研究这个下拉菜单:http://cssdeck.com/labs/he8ykb8n

第一个问题:我试图让下拉菜单悬停在背景图片/幻灯片上。出于某种原因，我不能那样做。

这就是我要实现的目标:http://bildeopplaster.no/3qi所以下拉菜单悬停在背景图片上。

第二个问题:另外，如果您在上面的演示中看到只有“男装”按钮。我尝试复制代码并更改按钮名称，以便所有按钮都可以像图片上那样显示，但代码没有将新按钮与“男装”按钮对齐。有什么方法可以修复，让所有按钮彼此相邻并具有相同的悬停效果？

导航栏的 HTML 代码:

<nav class="navigation">

<ul>
<li class="menubar"><a href="#">MEN'S WEAR</a>
  <ul>
    <li class="dropdown"><a href="#">TOPWEAR</a>
      <ul>
        <li><a href="#">Jackets & Coats</a></li>
        <li><a href="#">Shirts</a></li>
        <li><a href="#">Overshirts</a></li>
        <li><a href="#">T-Shirts</a></li>
        <li><a href="#">Basic T-Shirts</a></li>
        <li><a href="#">Knitwear</a></li>
        <li><a href="#">Sweats</a></li>            
      </ul>
    </li>

    <li class="dropdown"><a href="#">BOTTOMWEAR</a>
      <ul>
        <li><a href="#">Jeans</a></li>
        <li><a href="#">Colour Jeans</a></li>
        <li><a href="#">Pants</a></li>
        <li><a href="#">Shorts</a></li>   
      </ul>
    </li>

    <li class="dropdown"><a href="#">FOOTWEAR</a>
      <ul>
        <li><a href="#">Boots</a></li>
        <li><a href="#">Sandals</a></li>
        <li><a href="#">Shoes</a></li>
        <li><a href="#">Snickers</a></li>         
      </ul>
    </li>

    <li class="dropdown"><a href="#">ACCESSORIES</a>
      <ul>
        <li><a href="#">Belts</a></li>
        <li><a href="#">Caps</a></li>
        <li><a href="#">Hats</a></li>
        <li><a href="#">Scarves</a></li>
        <li><a href="#">Gloves</a></li>
        <li><a href="#">Sunglasses</a></li>
        <li><a href="#">Watches</a></li>
        <li><a href="#">Jewelry</a></li>              
      </ul>
    </li>

    <li class="dropdown"><a href="#">SALE</a>
      <ul>
        <li><a href="#">Jackets & Coats</a></li>
        <li><a href="#">Shirts</a></li>
        <li><a href="#">Overshirts</a></li>
        <li><a href="#">T-Shirts</a></li>
        <li><a href="#">Basic T-Shirts</a></li>
        <li><a href="#">Knitwear</a></li>
        <li><a href="#">Sweats</a></li>            
      </ul>
    </li>

  </ul>
</li>
</ul>

<ul>
<li class="menubar"><a href="#">MEN'S WEAR</a>
  <ul>
    <li class="dropdown"><a href="#">TOPWEAR</a>
      <ul>
        <li><a href="#">Jackets & Coats</a></li>
        <li><a href="#">Shirts</a></li>
        <li><a href="#">Overshirts</a></li>
        <li><a href="#">T-Shirts</a></li>
        <li><a href="#">Basic T-Shirts</a></li>
        <li><a href="#">Knitwear</a></li>
        <li><a href="#">Sweats</a></li>            
      </ul>
    </li>

    <li class="dropdown"><a href="#">BOTTOMWEAR</a>
      <ul>
        <li><a href="#">Jeans</a></li>
        <li><a href="#">Colour Jeans</a></li>
        <li><a href="#">Pants</a></li>
        <li><a href="#">Shorts</a></li>   
      </ul>
    </li>

    <li class="dropdown"><a href="#">FOOTWEAR</a>
      <ul>
        <li><a href="#">Boots</a></li>
        <li><a href="#">Sandals</a></li>
        <li><a href="#">Shoes</a></li>
        <li><a href="#">Snickers</a></li>         
      </ul>
    </li>

    <li class="dropdown"><a href="#">ACCESSORIES</a>
      <ul>
        <li><a href="#">Belts</a></li>
        <li><a href="#">Caps</a></li>
        <li><a href="#">Hats</a></li>
        <li><a href="#">Scarves</a></li>
        <li><a href="#">Gloves</a></li>
        <li><a href="#">Sunglasses</a></li>
        <li><a href="#">Watches</a></li>
        <li><a href="#">Jewelry</a></li>              
      </ul>
    </li>

    <li class="dropdown"><a href="#">SALE</a>
      <ul>
        <li><a href="#">Jackets & Coats</a></li>
        <li><a href="#">Shirts</a></li>
        <li><a href="#">Overshirts</a></li>
        <li><a href="#">T-Shirts</a></li>
        <li><a href="#">Basic T-Shirts</a></li>
        <li><a href="#">Knitwear</a></li>
        <li><a href="#">Sweats</a></li>            
      </ul>
    </li>

  </ul>
</li>
</ul>

</nav>

导航栏的 CSS 代码:

.navigation {
 position: relative;
background-color: #ddd;
width: 1024px;
height: 42px;
margin: 0 auto;
-webkit-font-smoothing:antialiased;
}

.navigation a {
-webkit-transition: all .25s ease;
   -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
     -o-transition: all .25s ease;
        transition: all .25s ease;
}

.menubar ul {
opacity: 0;
position: relative;
top: 0px;
visibility: hidden;
z-index: 1;
-webkit-transition: all .25s ease;
   -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
     -o-transition: all .25s ease;
        transition: all .25s ease;  
}

.menubar {
position: relative;
list-style: none;
display: inline;
}

.menubar a {
text-decoration: none;
position: relative;
top: 12px;
right: 40px;
font-weight: bold;
padding: 12px 15px 11px 15px;

 }



.menubar a:nth-child(1) {
color: #000;
list-style: none;
}

.menubar a:hover:nth-child(1) {
color: #fff;
background: #000;

}

.menubar:hover ul {
visibility: visible;
opacity: 1;

}

.menubar li{
background: transparent;
}

.dropdown:nth-child(1) {
float: left;
background: #000;
position: relative;
list-style: none;
top: 22px;
right: 80px;
padding-bottom: 96px;
padding-left: 40px;
padding-top: 1px;
margin-right: -20px;  
}
.dropdown:nth-child(2) {
float: left;
background: #000;
position: relative;
list-style: none;
top: 22px;
right: 60px;
padding-bottom: 200px;
padding-left: 40px;
padding-top: 1px;
margin-right: -20px;  
}

.dropdown:nth-child(3) {
float: left;
background: #000;
position: relative;
list-style: none;
top: 22px;
right: 40px;
padding-bottom: 200px;
padding-left: 40px;
padding-top: 1px;
margin-right: -20px;  
}
.dropdown:nth-child(4) {

float: left;
background: #000;
position: relative;
list-style: none;
top: 22px;
right: 20px;
padding-bottom: 63px;
padding-left: 40px;
padding-top: 1px;
margin-right: -20px;  
}
.dropdown:nth-child(5) {
float: left;
background: #000;
position: relative;
list-style: none;
top: 22px;
right: 20px;
left: 0px;
padding-bottom: 100px;
padding-left: 42px;
padding-right: 20px;
padding-top: 1px;

}


.dropdown a {
right: 10px;
position: relative;
top: 10px;
left: -40px;
font-weight: bold;
color: #888;
}

.dropdown a:hover {
text-decoration: underline;
color: #fff;
}

.dropdown a:nth-child(1) {
color: #cbcbcb;

}

.dropdown ul {
list-style: none;
display: inline;
position: relative;
padding: 15px;
}

.dropdown ul li {
position: relative;
padding: 8px;
top: 5px;
right: 5px;
font-size: 13.5px;
}

.dropdown ul li a {
font-weight: normal;

}

Answer 1

试试这个

.menubar:hover ul {
  opacity: 0.5;
}

附带说明，始终使用 display:none 隐藏和显示:block 显示元素。可见性会产生问题。