Изменение li при наведении на ниже стоящий?

Question

[Ваня]

Cделал вертикальное меню с использованием ul li
Каждый li имеет нижний border:

.menu li{
	border-bottom: 1px solid #E4E4E4;
}

При наведении цвет изменяется:

.menu li:hover {
	border-bottom: 1px solid #AE1D8E;
	
}

Последний li не имеет border:

.menu li:last-child{
	border-bottom: none;
}

Вопрос: как сделать так, чтобы при наведении на последний li изменялся цвет border перед ним стоящего, так как если при наведении на последний добавлять цвет border, получится два рядом стоящих и смещение. Решение нужно на CSS.

Comments

[Дмитрий Маринин]

Пожалуйста, поправьте блоки кода, у вас первые два блока одинаковые. Еще лучше будет, если сделаете демку на codepen.io или на любом подобном ресурсе и добавите ссылку в вопрос.

[Евгений]

Ссылочку бы на демку, чтобы понимать о чем вы.

[Ваня]

Сейчас нарисую

[Ваня]

Мне нужно время,я опишу по другому. Я читал и искал много.

Answer 1

[Rithmsamba]

Гляньте в сторону псевдоэлемента, вот так например

Comments

[Ваня]

Большое спасибо за пример

Answer 2

[Виталий Инчин ☢]

.menu li:not(:last-child):hover {
  border-bottom: 1px solid #AE1D8E;
}

.menu :last-child:hover {
  border-top: 1px solid #AE1D8E;
}
.menu li:hover{
   background: #83C85A  none repeat scroll 0% 0%;
}

Answer 3

[Дмитрий Маринин]

Демо: codepen.io/anon/pen/gpyjZO

.menu li {
  padding: 5px;  /* отступы просто для примера */
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

/* Для эффекта использования border от предыдущего li  */
.menu li:last-child {
  position: relative;
  top: -1px;        
  padding-top: 6px; /* значение на 1 больше, чем у остальных li */
}

.menu li:hover {
  background-color: #83C85A;
  border-bottom-color: #AE1D8E;
}

.menu li:last-child:hover {
  border-top-color: #AE1D8E;
  border-bottom-color: transparent;
}

Подобного эффекта можно также добиться через псевдо-элемент ::before.

Comments

[Ваня]

Вы правильно меня поняли, но в примере Border смещается. Нужно чтобы он стоял на месте.

[Дмитрий Маринин]

chelovekmuravei: обновил ответ и демо. Свойство padding просто для наглядности добавил — можно и без них. Теперь то, что вам нужно, не так ли?

Answer 4

[Максим Тимофеев]

можно создать элемент внутри li который при получении hover будет получать отрицательный маргин, эмитируя border у предыдущего li
либо li:hover:before {margin-top:-30px; border:solid #000 2px; display:block; width:100px; height:26px;}