CSS不會繼承問題

那麼，我正在開發一個ul-li多級菜單並且有問題。CSS不會繼承問題

首先，一些代碼（我知道這是不是完美的，但蹩腳的div是由WordPress自動添加）：

<nav id="page-navigation"> 
<div class="menu-menu-container"> 
    <ul id="menu-menu" class="menu"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Blog</a></li> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">Pages</a> 
      <ul class="sub-menu"> 
       <li><a href="#">One Column</a></li> 
       <li><a href="#">Two Columns</a></li> 
       <li><a href="#">Three Columns</a></li> 
      </ul> 
     </li> 
    </ul> 
</div>

在我的樣式表，我會指着只頁面導航識別ID &子菜單類，所以你可以完全跳過其他ids /類。

問題是我無法更改子菜單中的鏈接寬度。我不知道如何。我完全迷失了。

至於我可以看到這個代碼覆蓋它們：

#page-navigation ul li { 
    float: left; 
    padding: 0; 
    font-size: 1.2em; 
    line-height: 1.2em; 
    background-repeat: no-repeat; 
    width: 200px; 
    height: 65px; 
} 

#page-navigation ul li a { 
    display: inline-block; 
    text-align: center; 
    padding: 10px 0 0 0; 
    text-shadow: #222 1px 1px 1px;  
    width: 200px; 
    height: 65px; 
}

這裏是爲子菜單項的代碼：

.sub-menu { 
    border-radius: 5px; 
    border: solid 1px #000; 
    box-shadow: 0px 0px 25px #000; 
    background-color: #222; 
    height: 200px; 
    width: 500px; /* THIS LINE DOESN'T WORK */ 
} 

.sub-menu li { 
    width: 500px; /* THIS LINE ALSO DOESN'T WORK ! */ 
} 

.sub-menu li a { 
    font: 10px Verdana; 
    tex-shadow: 1px 1px 0px #000; 
    width: 100px; /* doesn't work :) */ 
    height: 100px; /* doesn't work :) */ 
}

我知道整個子菜單的內<li>，但無法做到這一點（默認的WordPress的行爲）。

現在是什麼？ :(

Thaanks

來源

2010-11-15 fomicz

你需要指定的完整路徑，等級越高的項目，目前更具體試試這個：

#page-navigation ul li .sub-menu li { 
    width: 100px; 
}

來源

2010-11-15 17:33:46 lnrbob

你.SUB菜單寬度，第一你的「不工作」實際上確實爲我工作。對於第二個，你可以做兩件事情。

讓它width: 500px !important所以它覆蓋無妨。不過，我會建議，而不是...
將ID放在選擇器的開頭。 .sub-menu li被任何帶ID的選擇器覆蓋。所以把它改爲#page-navigation .sub-menu li。

來源

2010-11-15 17:34:12 Tesserex

選擇器#page-navigation ul li比.sub-menu li更具體，所以優先。

您可以工作了這一點通過添加!important註解你的CSS規則是這樣的：

.sub-menu li { 
    width: 500px !important; 
}

或指定的規則更具體：

#page-navigation ul.sub-menu li { 
    width: 500px; 
}

對於這樣的問題，請請致電Firebug - 您可以很好地瞭解什麼被覆蓋。這有助於很多:)

來源

2010-11-15 17:35:15 Kos

CSS不會繼承問題

回答

相關問題