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

Question

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

Поскольку у меня недостаточно репутации, щелкните по ссылке, чтобы посмотреть картинку. ->http://ctrlv.in/478501 < -

Не нужно добавлять специальные эффекты, такие как цвет или движение, только границу. Пожалуйста, помогите

Answer 1

Это вы что искали?

HTML

<ul> 
    <li>Home</li> 
    <li>About</li> 
    <li>Contact</li> 
</ul> 

CSS

li{ 
    list-style-type: none; 
    background: #f5f5f5; 
    float: left; 
    padding: 8px 15px; 
    border-bottom: 2px solid #CCC; 
} 

li:hover{ 
    border-bottom: 2px solid red; 
} 

FIDDLE

UPDATE

NEW FIDDLE

NEW UPDATE

THIRD FIDDLE