CSS - зависание над элементом влияет на несколько элементов

Question

У меня есть меню, которое плавает прямо на экране, и, когда он нависает над одним из элементов, он делает то, что он должен делать, непрозрачность меняет остальное и только зависающий элемент подчеркивается. Но при падении между элементами на пустом пространстве небольшая часть пространства в середине изменяет непрозрачность для всех элементов. Если я надвигаюсь на элемент рядом с низом или сверху и промежутками между всеми элементами, он делает то, что должен. Я знаю, что это имеет какое-то отношение к тегу <ul>, но не знает, как его решить. Вот код:

HTML

<div class="menu"> 
    <ul> 
    <li><a>Home</a></li> 
    <li><a>About</a></li> 
    <li><a>Projects</a></li> 
    <li><a>Services</a></li> 
    <li><a>Contact</a></li> 
    </ul> 
</div> 

CSS

.menu { 
    float:right; 
    margin-right: 50px; 
    } 
ul li { 
    display: inline; 
    text-decoration: none; 
    color: #003560; 
    padding: 10px 50px; 
    transition: all ease .3s; 
    } 
ul:hover li { 
    color: #0089F9; 
    opacity: .1; 
    transition: all ease .3s; 
    } 
ul li:hover { 
    opacity: 1; 
    padding: 15px 55px; 
    } 
li { 
    border: 2px solid #0089F9; 
    border-radius: 5px; 
    margin-left: 20px; 
    } 

https://jsfiddle.net/Vc2ug/49/

Answer 1

Вы можете использовать float: left вместо display: inline

ul li { 
    display: block; 
    float: left; 
    text-decoration: none; 
    color: #003560; 
    padding: 10px 50px; 
    transition: all ease .3s; 
} 

https://jsfiddle.net/7w8w86my/1/

Answer 2

ul:hover li { 
    transition: all ease .3s; 
} 

Удалить прозрачность и цветные свойства и сделать ul:hover li, как указано выше. Фактически это означает, что когда ходы находятся на теге ul, примените следующие свойства: lo li. Итак, когда вы размещаете между двумя элементами списка, оно находится на ul, и поэтому я применяю opacity ко всем элементам списка.

Answer 3

Просто добавьте в свой <ul> прокладку внизу и сверху. Как это:

ul { 
    padding: 50px 0 50px 0; 
} 

Here демо.

Answer 4

Просто удалите пробелы в HTML между <li>

Answer 5

Ваша проблема, что, когда вы направляете курсор в пространстве между Li все уль становится зависанием. Вам нужно изменить структуру html и отказаться от использования ul или добавить небольшой скрипт. Например, так: https://jsfiddle.net/trean/sxoxpz2e/2/, https://jsfiddle.net/trean/sxoxpz2e/2/embedded/result/

$('.menu > ul > li').hover(function() { 
     $(this).parent().find('li').addClass('unhover'); 
    }, function() { 
     $(this).parent().find('li').removeClass('unhover'); 
}); 

CSS:

.unhover { 
    color: #0089F9; 
    opacity: .1; 
    transition: all ease .3s; 
    } 

Я не исключаю, что есть способы обойтись без JQuery, но до сих пор ничего на ум не приходит, кроме отказа из ul в пользу иерархии div.