Есть меню, сделанное на CSS, без JS. При наведении всё работает, но пункт, который я выбрал (главный), он стает по ширине равный тем блокам, которые внутри его:
неактивный пункт:
когда навёл:
Как можно сделать, чтобы ширина не изменялась, независимо от ширины внутренних пунктов?
.header_menu>li {
vertical-align: middle;
display: inline-block;
font-size: 17px;
height: 40px;
}
.header_menu li>a {
-webkit-transition: color .2s, background .2s, border .2s;
-moz-transition: color .2s, background .2s, border .2s;
-o-transition: color .2s, background .2s, border .2s;
transition: color .2s, background .2s, border .2s;
}
.header_menu li:hover #sub_header_menu {
display: block;
}
.header_menu li:hover {}
.header_menu li>a:hover {
background-color: #FD4A29;
color: #F0F0F8;
-webkit-transition: color .2s, background .2s, border .2s;
-moz-transition: color .2s, background .2s, border .2s;
-o-transition: color .2s, background .2s, border .2s;
transition: color .2s, background .2s, border .2s;
}
.header_menu a {
display: block;
border-right: 1px solid #F4F4FC;
color: #777777;
text-decoration: none;
padding: 10px 15px;
}
#sub_header_menu {
display: none;
}
#sub_header_menu a {
border: 0;
}
#sub_header_menu li {
list-style-type: none;
}
#sub_header_menu {
border: 1px solid #F4F4FC;
background: white;
}
<ul class="header_menu">
<li><a href="#">4242342342</a></li>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li>
<a href="#">Кафедра</a>
<ul id="sub_header_menu">
<li><a href="#">Лолшокваа</a></li>
<li><a href="#">ываавыаыв</a></li>
<li><a href="#">ваываывааа</a></li>
<li><a href="#">ваыавыавыа</a></li>
<li><a href="#">аываыаывва</a></li>
</ul>
</li>
<li><a href="#">Абитуриенту</a></li>
<li><a href="#">Много</a></li>
<li><a href="#">Даже 3</a></li>
</ul>