Как запретить изменение размера?

Рейтинг: 1Ответов: 1Опубликовано: 14.02.2015

Есть меню, сделанное на CSS, без JS. При наведении всё работает, но пункт, который я выбрал (главный), он стает по ширине равный тем блокам, которые внутри его:

неактивный пункт:

alt text

когда навёл:

alt text

Как можно сделать, чтобы ширина не изменялась, независимо от ширины внутренних пунктов?

.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>

Ответы