CSS не наследует проблему

Question

Ну, я работаю в многоуровневом меню ul-li и имею проблемы.

Во-первых, какой-то код (я знаю, что это не идеальный, но дерьмовый ДИВ автоматически добавляется 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>     

В моей таблице стилей я буду указывать только на страницу-навигации идентификатора & подменю, чтобы вы могли полностью пропустить другие идентификаторы/классы.

Проблема заключается в том, что я не могу изменить ШИРИНУ ссылок в подменю. Я не знаю, как это сделать. Я полностью потерян.

Насколько я могу видеть этот код переписывает их:

#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

Answer 1

Вы должны указать полный путь, тем выше пункты уровня в настоящее время более конкретные Попробуйте это:.

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

Answer 2

вашу ширину .sub-меню, первый из " не работает»на самом деле делает работу для меня. Во-вторых, вы можете сделать две вещи.

1. сделать это width: 500px !important так переопределяет все равно. Но я бы посоветовал вместо ...
2. Поместите идентификатор в начале селектора. .sub-menu li переопределяется любым селектором с идентификатором в нем. Поэтому измените его на #page-navigation .sub-menu li.

Answer 3

Селектор #page-navigation ul li более конкретно, чем .sub-menu li, поэтому имеет значение.

Вы можете решить эту проблему путем добавления !important аннотацию к вашим правилам CSS, как это:

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

или указать правило как более конкретно:

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

Для таких проблем, как это, пожалуйста обратитесь к Firebug - у вас будет прекрасный вид на то, что что-то переписано. Это очень помогает :)