Выпадающее меню работает с идентификаторами, но не с классами

Недавно я решил добавить второе раскрывающееся меню к моей навигации. Первоначально был только один выпадающий список, поэтому я использовал атрибут id, чтобы отметить его. При добавлении второго я думал, что это будет так же просто, как изменить идентификатор на атрибут класса и изменить соответствующие селекторы в файле CSS. Однако, похоже, это не так. Как видно из приведенных ниже примеров, версия с атрибутами класса не работает должным образом при наведении курсора, тогда как та же самая навигация, которая использует два атрибута id для раскрывающихся списков, работает как задумано.

Я предполагаю, что это может быть связано с порядком правил CSS.

http://jsfiddle.net/e5d24upa/

HTML:

<body>
<div id="menuholder">
    <ul id="mainmenu">
        <li class="menumem"><a href="#">Item 1</a></li>
        <li class="menumem"><a href="#">Item 2</a></li>
        <li class="submenutop"><a href="#">Item 3</a>
            <ul class="submenu">
                <li><a href="#">SubItem 1</a></li>
                <li class="submenubottom"><a href="#">SubItem 1</a></li>
            </ul>
        </li>
        <li class="submenutop"><a href="#">Item 4</a>
            <ul class="submenu">
                <li><a href="#">SubItem 1</a></li>
                <li><a href="#">SubItem 2</a></li>
                <li><a href="#">SubItem 3</a></li>
                <li><a href="#">SubItem 4</a></li>
                <li class="submenubottom"><a href="#">SubItem 5</a></li>
            </ul>
        </li>
        <li class="menumem"><a href="#">Item 5</a></li>
    </ul>
</div>
</body>

CSS:

.submenu{
display:none;
list-style:none;
width:19%
}

#menuholder ul li:hover > ul{
    display:block
}


#mainmenu{
list-style:none;
display:inline-table;
width:100%;
text-align:center;
font-size:20px
}

#mainmenu li{
    float:left;
    background:#000000;
    width:19%
}
    #mainmenu li:hover{
        background:#FF0000;
    }
        #mainmenu li:hover a{
            color:#FFFFFF
        }

    #mainmenu li a{
        display:block;
        width:100%;
        color:#FFFFFF;
        text-decoration:none
    }


.submenu{
    padding:0;
    position:absolute

}

    .submenu li{ 
        position:relative;
        width:100%;
        background:#000000
    }
        .submenu li a{
            width:100%;

        }
        .submenu li:hover{
            background:#FF0000
        }
            .submenu li a:hover{
                color:#FFFFFF
            }

.menumem{
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px
}
.submenutop{
    -moz-border-radius:15px 15px 0 0;
    -webkit-border-radius:15px 15px 0 0;
    border-radius:15px 15px 0 0
}

.submenubottom{
    -moz-border-radius:0 0 15px 15px;
    -webkit-border-radius:0 0 15px 15px;
    border-radius:0 0 15px 15px
}

http://jsfiddle.net/1n5f7dh1/

HTML:

<body>
<div id="menuholder">
    <ul id="mainmenu">
        <li class="menumem"><a href="#">Item 1</a></li>
        <li class="menumem"><a href="#">Item 2</a></li>
        <li class="submenutop"><a href="#">Item 3</a>
            <ul id="submenu2">
                <li><a href="#">SubItem 1</a></li>
                <li class="submenubottom"><a href="#">SubItem 1</a></li>
            </ul>
        </li>
        <li class="submenutop"><a href="#">Item 4</a>
            <ul id="submenu">
                <li><a href="#">SubItem 1</a></li>
                <li><a href="#">SubItem 2</a></li>
                <li><a href="#">SubItem 3</a></li>
                <li><a href="#">SubItem 4</a></li>
                <li class="submenubottom"><a href="#">SubItem 5</a></li>
            </ul>
        </li>
        <li class="menumem"><a href="#">Item 5</a></li>
    </ul>
</div>
</body>

CSS:

#submenu,#submenu2{
display:none;
list-style:none;
width:19%
}

#menuholder ul li:hover > ul{
    display:block
}


#mainmenu{
list-style:none;
display:inline-table;
width:100%;
text-align:center;
font-size:20px
}

#mainmenu li{
    float:left;
    background:#000000;
    width:19%
}
    #mainmenu li:hover{
        background:#FF0000;
    }
        #mainmenu li:hover a{
            color:#FFFFFF
        }

    #mainmenu li a{
        display:block;
        width:100%;
        color:#FFFFFF;
        text-decoration:none
    }


#submenu,#submenu2{
    padding:0;
    position:absolute

}

    #submenu li,#submenu2 li{ 
        position:relative;
        width:100%;
        background:#000000
    }
        #submenu li a,#submenu2 li a{
            width:100%;

        }
        #submenu li:hover,#submenu2 li:hover{
            background:#FF0000
        }
            #submenu li a:hover,#submenu2 li a:hover{
                color:#FFFFFF
            }

.menumem{
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px
}
.submenutop{
    -moz-border-radius:15px 15px 0 0;
    -webkit-border-radius:15px 15px 0 0;
    border-radius:15px 15px 0 0
}

.submenubottom{
    -moz-border-radius:0 0 15px 15px;
    -webkit-border-radius:0 0 15px 15px;
    border-radius:0 0 15px 15px
}

3 ответа

Решение

Ул, содержащий выпадающий список, составляет 100% от его родителя, но ли внутри него - 19%. Это исходит от вашего верхнего уровня #mainmenu li правило, которое имеет преимущественную силу .submenu li, Вы можете взломать его, установив .submenu li"s width:100%!important;Как указали другие, но это ухудшает читабельность позже, когда вы будете пытаться устранять неисправности в более сложных каскадах.

CSS выбирает то, что он считает наиболее конкретным правилом для каждого атрибута. Идентификатор более специфичен, чем класс, хотя класс находится на элементе ближе к тому, который вы хотите изменить.

Превратите.submenu li в #mainmenu.submenu li, и выпадающие правила нижнего уровня будут иметь приоритет.

#mainmenu .submenu li {
  position: relative;
  width: 100%;
  background: #000000;
}

В этом случае ваш #mainmenu li css свойство, перекрывающее свойства вашего .submenu li просто внесите следующие изменения в свой .submenu li,

.submenu li {
    position: relative;
    width: 100% !important;/*Changed*/
    background: #000000 !important; /*Changed*/
}

DEMO

Сначала вам нужно изменить параметр ширины в .submenu от width:19% в width:100%, Во-вторых, вам нужно добавить в .submenu li clear:both параметр.

Предложение: Если вы используете% для определения ширины, вы должны знать, что параметры width, padding и margin складываются. Поэтому, если вы хотите, чтобы ваш элемент заполнял 100% без переполнения, вышеупомянутые параметры должны добавить до 100%. Например:

.myClass {
    width:92%;
    padding:2%;
    margin:2%;
}

Общая ширина элемента = ширина + ( 2 * отступ) + ( 2 * поле)

Другие вопросы по тегам