Наведите курсор на верхнее меню css над ним

Question

У меня есть меню с выпадающим списком, которое прекрасно работает, но проблема, которую я заметил, - это если вы наведете ссылку на дочерний элемент, она откроет меню, но ссылка станет незаметной на меню в нижней половине.

<div class="desktop_navigation"> 
    <ul> 
     <li><a href="#">Link 1</a></li> 
     <li><a href="#">Link 2</a> 
      <ul> 
       <li><a href="#">Link 2 child</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Link 3</a></li> 
    </ul> 
</div> 

Это структура для меню. Детскими элементами являются sub <ul> основного <li>, а затем скрыты с использованием CSS до тех пор, пока их родительский <li> не зависнет.

Следующая jFiddle будет включать в себя все CSS я использую и рабочий пример вопроса я в настоящее время, имеющий:

https://jsfiddle.net/nrzfa49s/

Answer 1

Ваш .desktop_navigation ul li ul наследуется в padding-top: 30px от своего родителя ul (.desktop_navigation ul), который покрывает родительскую ссылку (ссылка 2), что делает ее непривлекательной.

Чтобы устранить проблему, обновите эти стили:

.desktop_navigation ul li ul { 
    list-style: none; 
    display: none; 
    padding-top: 0; /*remove the 30px padding*/ 
} 

.desktop_navigation ul li:hover ul { 
    display: block; 
    position: absolute; 
    top: 100%; /*set your top value to be more dynamic based on the height of the parent*/ 
    z-index: 890; 
} 

Вот fiddle записи демо это решение.

Обычно, когда вы стиль меню, как это рекомендуется использовать > при оформлении элементов меню из-за вложенности (т.е. .desktop_navigation > ul это будет препятствовать ребенку ul от наследования отступы)

Answer 2

Потребовалось некоторое время, но вопрос здесь:

.desktop_navigation ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    padding-top: 30px; //remove this line 
} 

Answer 3

Вы только хотите padding-top для ul-х быть на родительском меню/верхнего уровня. Затем, если вы удалите атрибут top из вложенных меню, они будут отображаться после ссылки в меню верхнего уровня.

.desktop_navigation a { 
 
\t color: #ccc; 
 
\t text-decoration: none; 
 
\t display: inline-block; 
 
\t padding: 12px; 
 
\t transition: all 0.5s ease; 
 
\t -webkit-transition: all 0.5s ease; 
 
\t -moz-transition: all 0.5s ease; 
 
\t -o-transition: all 0.5s ease; 
 
} 
 

 
.desktop_navigation ul li:hover a { 
 
\t color: #fff; 
 
\t background: #444; 
 
\t text-decoration: none; 
 
\t display: inline-block; 
 
\t z-index: 1002; 
 
\t padding: 12px; 
 
\t transition: all 0.5s ease; 
 
\t -webkit-transition: all 0.5s ease; 
 
\t -moz-transition: all 0.5s ease; 
 
\t -o-transition: all 0.5s ease; 
 
} 
 

 
.desktop_navigation ul li ul li a:link, 
 
.desktop_navigation ul li ul li a:visited, 
 
.desktop_navigation ul li ul li a:active { 
 
\t z-index: 1001; 
 
\t width: 100%; 
 
\t display: block; 
 
\t color: #444; 
 
\t background: #fff; 
 
\t transition: all 0.5s ease; 
 
\t -webkit-transition: all 0.5s ease; 
 
\t -moz-transition: all 0.5s ease; 
 
\t -o-transition: all 0.5s ease; 
 
} 
 

 
.desktop_navigation ul li ul li a:hover { 
 
\t width: 100%; 
 
\t display: block; 
 
\t color: #111; 
 
\t z-index: 1002; 
 
\t background: #ccc; 
 
\t transition: all 0.5s ease; 
 
\t -webkit-transition: all 0.5s ease; 
 
\t -moz-transition: all 0.5s ease; 
 
\t -o-transition: all 0.5s ease; 
 
} 
 

 
.desktop_navigation ul { 
 
\t list-style: none; 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 

 
.desktop_navigation > ul { 
 
    padding-top: 30px; 
 
} 
 

 
.desktop_navigation ul li { 
 
\t display: inline-block; 
 
\t position: relative; 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t z-index: 1002; 
 
} 
 

 
.desktop_navigation ul li ul { 
 
\t list-style: none; 
 
\t display: none; 
 
} 
 

 
.desktop_navigation ul li:hover ul { 
 
\t display: block; 
 
\t position: absolute; 
 
\t z-index: 890; 
 
} 
 

 
.desktop_navigation ul li ul li { 
 
\t float: none; 
 
\t position: relative; 
 
\t min-width: 180px; 
 
\t z-index: 890; 
 
}

\t \t \t \t \t <div class="desktop_navigation"> 
 
\t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t <li><a href="#">Link 1</a></li> 
 
\t \t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t \t <a href="#">Link 2</a> 
 
\t \t \t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t \t \t <li><a href="#asdf">Link 2 child</a></li> 
 
\t \t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t \t <li><a href="#">Link 3</a></li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </div>