透明菜單

Question

我試圖在線進行調查，但找不到任何東西。 我想改變我的菜單，使其在我的背景圖像後面，像這個網站上：https://www.paypal.com/ca/webapps/mpp/merchant

我該如何改變我的CSS應用到我的菜單？

.holder{ 
width:960px; 
margin:0 auto; 
overflow:hidden; 
position:relative; 
-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
box-sizing:border-box; 
} 
#nav{ 
background:#fefefe; 
padding:15px; 
} 

#nav .clearfix.mobile{ 
display: none; 
} 

#nav .nav-toggle{ 
/* margin:10px; */ 
display:none; 
float:right; 
} 

#nav #nav-topmenu{ 
margin-top:5px; 
} 

#nav #nav-topmenu ul li{ 
list-style:none; 
display:inline-block; 
vertical-align:middle; 
background:url(../img/bg-nav.png) no-repeat 0 4px; 
padding: 0 19px; 
line-height: 17px; 
margin:0; 
} 
#nav #nav-topmenu ul li:first-child{background:none;} 
#nav #nav-topmenu ul li a{ 
font-size:14px; 
font-weight: normal; 
line-height:14px; 
} 

#nav #nav-topmenu-mobile ul li{ 
list-style:none; 
padding:10px 20px; 
margin:0; 
border-bottom: 1px solid #ccc; 
} 
#nav #nav-topmenu-mobile ul li:first-child{background:none;} 
#nav #nav-topmenu-mobile ul li a{ 
font-size:50px; 
font-weight: normal; 
line-height:50px; 
/* color:#fff; */ 
} 

#nav #nav-topmenu-mobile ul li select{ 
-webkit-appearance: menulist-button; 
height: 50px; 
width: 210px; 
font-size: 30px; 
} 

#nav .popover{ 
min-width: 300px; 
left:75% !important; 
top:55px !important; 
} 

#nav .popover .arrow{ 
left:260px !important; 
} 

<div class="hidden-xs" id="nav-topmenu"> 
      <select name='langs' class="lang-selector -form-control pull-right"> 
       <option value="1" <?php if(LANG_ID == 1) echo "selected='selected'" ?> data-lang="en"> 
        English 
       </option> 

       <option value="2" <?php if(LANG_ID == 2) echo "selected='selected'" ?> data-lang="fr"> 
        Français 
       </option> 

       <option value="3" <?php if(LANG_ID == 3) echo "selected='selected'" ?> data-lang="es"> 
        Espa&ntilde;ol 
       </option> 
      </select> 
      <ul> 
       <?php 
       if(!Members_Factory::getRowByAuth() || Members_Factory::getRowByAuth()->is()): 
       ?> 
        <li> 
         <a href="<?php echo $this->url(array(), "job")?>"><?php echo __("flexible")?></a> 
        </li> 
       <?php 
       endif; 
       ?> 
       <?php 
       if(!Members_Factory::getRowByAuth() || Members_Factory::getRowByAuth()->isCompany()):?> 
        <li> 
         <a href="<?php echo $this->url(array(), "find")?>"><?php echo __("Find")?></a> 
        </li> 
       <?php 
       endif; 
       ?> 
       <li> 
        <!-- <a href="https://www.example.com/blog/"><?php echo __("Blog")?></a> --> 
        <a href="<?php echo $this->url(array("section" => "companies"), "how-it-works")?>" title="<?php echo __("How it works")?>"><?php echo __("How it works")?></a> 
       </li> 
       <li> 
        <a href="<?php echo $this->url(array(), "pricing")?>" title="<?php echo __("Pricing")?>"><?php echo __("Pricing")?></a> 
       </li> 
      </ul> 
     </div> 

Answer 1

在樣式表的內部，您需要爲菜單的各個部分創建一個類或ID。

因此，菜單本身持有的盒子會爲您的課程或ID設置opacity屬性。

然後，您可以使用id作爲實際菜單項，並使用屬性末尾的!important調用覆蓋它們的不透明度。