CSS не проблема наследования

Question

Хорошо, я работаю в многоуровневом меню и у меня проблемы.

Во-первых, какой-то код (я знаю, что он не идеален, но Wordpress автоматически добавляет дерьмовый div):

<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

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

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

Answer 2

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

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

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

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

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

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

Answer 3

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

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