0

Есть меню, сделанное на 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>

2
  • Боюсь, это невозможно. Приложи код CSS, потому что непонятно, как работает именно.
    – Enterely
    14 фев 2015 в 16:47
  • Всё, приложил. 14 фев 2015 в 17:05

2 ответа 2

2

http://jsfiddle.net/ynn7mavs/

0

Просто для субменю добавить абсолютное позиционирование

.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;
  position:absolute;
}

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.