Выпадающее меню работает с идентификаторами, но не с классами
Недавно я решил добавить второе раскрывающееся меню к моей навигации. Первоначально был только один выпадающий список, поэтому я использовал атрибут id, чтобы отметить его. При добавлении второго я думал, что это будет так же просто, как изменить идентификатор на атрибут класса и изменить соответствующие селекторы в файле CSS. Однако, похоже, это не так. Как видно из приведенных ниже примеров, версия с атрибутами класса не работает должным образом при наведении курсора, тогда как та же самая навигация, которая использует два атрибута id для раскрывающихся списков, работает как задумано.
Я предполагаю, что это может быть связано с порядком правил CSS.
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
}
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*/
}
Сначала вам нужно изменить параметр ширины в .submenu
от width:19%
в width:100%
, Во-вторых, вам нужно добавить в .submenu li
clear:both
параметр.
Предложение: Если вы используете% для определения ширины, вы должны знать, что параметры width, padding и margin складываются. Поэтому, если вы хотите, чтобы ваш элемент заполнял 100% без переполнения, вышеупомянутые параметры должны добавить до 100%. Например:
.myClass {
width:92%;
padding:2%;
margin:2%;
}
Общая ширина элемента = ширина + ( 2 * отступ) + ( 2 * поле)