CSS: <a> теги отключены после использования псевдоэлементов

Question

Я выполняю упражнение CSS, в котором должен быть клонирован старый сайт BBC. Первоначальная проблема заключалась в том, что белые нижние границы #topmenu li оказались неуловимыми (я включил этот код на приведенную ниже страницу в качестве комментария)

Это было исправлено добавлением правой красной границы с использованием псевдо элементов. Однако привязные метки отключены. Я думаю, что это связано с абсолютной позицией красной границы, но я не могу заставить меню появляться так, как должно, без абсолютной позиции. Теперь это выглядит так, как я хочу, но ссылки верхнего меню больше не работают: http://jsbin.com/poginowibe/1/edit?output

Любые идеи о том, как это можно разобраться? Любая помощь будет оценена по достоинству.

/* Это исходный код, когда появились белые нижние границы странно */

#topmenudiv li { 
    list-style: none; 
    height: 100%; 
    padding: 14px 15px 11px 15px; 
    border-right: 1px solid #990800; 
    float: left; 
    position: relative; 
    z-index: 1; 
} 

#topmenudiv li:hover { 
    color: #ffffff; 
    text-decoration: none; 
    padding: 14px 15px 8px 15px; 
    border-bottom: 3px solid #FFFFFF; 
    outline: 0; 
} 

/* Этот код после того, как ненадежный вид фиксируется, но метки были отключены */

#topmenudiv li { 
    list-style: none; 
    height: 100%; 
    padding: 14px 15px 11px 15px; 
    float: left; 
    position: relative; 
    z-index: 1; 
} 

#topmenudiv li:hover { 
    color: #ffffff; 
    text-decoration: none; 
    padding: 14px 15px 8px 15px; 
    border-bottom: 3px solid #FFFFFF; 
    outline: 0; 
} 

#topmenudiv li::after { 
    content: ""; 
    position: absolute; 
    bottom: 0; top: 0; left: 0; right: 0; 
    border-right: 1px solid #990800; 
} 

---

С некоторыми изменениями кода Йорга я наконец смог заставить его работать!

#topmenudiv ul { 
    margin-top: 0px; 
    padding: 0; 
} 

#topmenudiv li { 
    list-style: none; 
    height: 38px; 
    line-height: 40px; 
    float: left; 
    position: relative; 
    z-index: 3; 
} 

#topmenudiv li:hover { 
    color: #ffffff; 
    text-decoration: none; 
    border-bottom: 3px solid #FFFFFF; 
    outline: 0; 
} 

#topmenudiv li a { 
    height: 100% !important; 
    font-size: 1em; 
    line-height: 40px; 
    border-right: 1px solid #990800; 
    display: block; 
    padding-left: 15px; 
    padding-right: 15px; 
} 

#topmenudiv li a:hover { 
    text-decoration: none; 
} 

Спасибо, связка! :)

Answer 1

Удалить #topmenudiv Ли :: после от вашего CSS и изменить #topmenudiv Ли таким образом:

#topmenudiv li { 
    list-style: none; 
    height: 100%; 
    padding: 14px 15px 11px 15px; 
    float: left; 
    position: relative; 
    z-index: 1; 
    border-right: 1px solid #990800; 
} 

Update

Используйте этот код и увидеть замечания ниже:

#topmenudiv ul { 
    height: 40px; 
    margin: 0; 
    padding: 0; 
} 

#topmenudiv li { 
    list-style: none; 
    height: 40px; 
    float: left; 
    border-bottom: 3px solid #FFFFFF; 
} 

#topmenudiv li:hover { 
    color: #ffffff; 
    text-decoration: none; 
    border-bottom: 3px solid blue; 
    outline: 0; 
} 

#topmenudiv li a { 
    height: 40px !important; 
    font-size: 1em; 
    line-height: 40px; 
    border-right: 1px solid #990800; 
    display: block; 
    padding-left: 15px; 
    padding-right: 15px; 

} 

#topmenudiv li a:hover { 
    text-decoration: none; 
} 

Удалить все свои материалы topmenudiv в CSS, также этот выше комментариев.

Я сделал линию границы для зависания синего цвета, так что вы можете видеть, что она работает.

Вы используете изображение на правильном сайте topbar, #sphere. Это должно быть фоновое изображение в CSS, поэтому вам не нужно обрабатывать z-index, а затем остальные ссылки будут работать.

Что я сделал, дайте тегам высоту и высоту линии и привяжите к ней красную рамку-левую. Я также удалил некоторые прокладки и поля.