CSS эффект линия под областью

Question

Я новичок в передний конце Developpement, и я создал дизайн в фотошопе, я уверен, портирование этого HTML/CSS, но у меня есть небольшая проблема:

я хочу добавить в нижней строке, которая немного темнее, когда элемент находится в подвешенном состоянии

вот мой код

CSS:

#global_left_nav ul{ 
    list-style-type: none;  
    font-family: "Lobster1"; 
    font-size: 20px; 
    color: #5a4e4e; 
} 


#global_left_nav ul li{ 
    background: #2e2828 url("images/diagonal_pattern.png") repeat; 
    background-blend-mode: multiply; 

    width: 200px; 
    height: 50px; 

    position: relative; 

    text-align: center; 
    margin-bottom: 30px; 
    line-height: 44px; 
    padding: 0; 
} 

#global_left_nav ul li:hover { 
    color: #c43a3a; 
    text-shadow: 1px 0px 0px #000, 
     0 1px 0 #000; 
} 

HTML:

<nav id="global_left_nav"> 
     <ul> 
      <li>Acceuil</li> 
      <li>Forum</li> 
      <li>Event</li> 
      <li>Live</li> 
      <li>Equipes</li> 
     </ul> 
    </nav> 

Answer 1

Попробуйте это:

#global_left_nav ul li:hover { border-bottom: 2px solid #000; } 

Кстати, это "Accueil" не "Acceuil";)

Answer 2

Вы можете добавить border-bottom свойство вашей li:

#global_left_nav ul li:hover { 
    color: #c43a3a; 
    text-shadow: 1px 0px 0px #000, 0 1px 0 #000; 
    border-bottom: 3px solid #000000; 
} 

Это добавляет черную линию 3px в вашу улицу, когда она зависает.

Answer 3

Попробуйте это:

#global_left_nav ul li:hover { 
    border-bottom: 5px solid #000; 
    height: 45px; 
} 

Вот живой пример:

https://jsfiddle.net/hv81rb5u/3/

Это даст вам желаемый эффект, а также, кнопки не будут «прыгать» при наведении на них.