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

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; 
} 

在一个侧面说明，请始终使用显示：无隐藏并显示：块以显示元素。可见性可能会产生问题。