Няма достъп до падащото меню при задържане на мишката, затворете празнината

Моят уебсайт има навигационна лента с падащо меню. На устройства с ширина 1024px (12 и 13-инчови настолни компютри), навигационната ми лента става отзивчива и се подрежда в 2 реда, за да се коригира за по-малкия размер на екрана.

Когато задържа курсора на мишката върху елемент от менюто в горния ред на навигационната лента, падащото меню се показва под долния ред на навигационната лента. Това създава празнина, която нарушава действието при задържане. Трябва да запълня празнината САМО В ГОРНИЯ РЕД ОТ МЕНЮТО на навигационната лента. Копирах кода по-долу от проверка на елемента от падащото меню, което искам да преместя нагоре:

.navbar-nav>li>.dropdown-menu {
margin-top: -10px;
}

.dropdown .dropdown-menu {
border-radius: 0;
top: 120% !important;
}

.yamm .dropdown-menu {
left: auto;
}

.dropdown-menu {
min-width: 110px;
padding-right: 25px;
}

.dropdown-menu {
z-index: 1021;
position: absolute;
display: none;
float: left;
padding: 5px 0;
margin: 2px 0 0;
font-size: 13px;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.15);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

Ако имате нужда от по-добро обяснение, можете да го проверите на живо, greenenvysupply.com и да увеличите размера на екрана си, докато навигационната лента се натрупа и образува два реда. След това опитайте да задържите курсора на мишката върху елемент от менюто на горния ред, който има елемент от менюто под него. Няма да имате достъп до падащото меню.

Опитах следния код, мислейки, че мога да коригирам горното поле само при размери на екрана от 1024px:

@media (width: 1024px) {
   #menu-item-5044 .dropdown-menu, #menu-item-5066 .dropdown-menu, 
   #menu-item-5076 .dropdown-menu, #menu-item-5085 .dropdown-menu, 
   #menu-item-5113 .dropdown-menu, #menu-item-5129 .dropdown-menu, 
   #menu-item-5128 .dropdown-menu, #menu-item-5111 .dropdown-menu {
      margin-top: -67px !important;
   }
}

Когато тествам това, не виждам промени. Аз съм напълно нов в кодирането и уеб дизайна, моля, поправете ме, ако правя нещо нередно!


drop-down-menu css twitter-bootstrap navbar jquery-hover
person dnat    schedule 26.08.2015    source източник
comment
Трябва да публикувате съответния HTML и CSS във вашия въпрос, вместо просто да включвате връзка. Все още (на мен) не е ясно какъв е проблемът. И накрая, не е необходимо да задавате множество декларации за стил, когато наистина всичко, което правите, е .dropdown-menu { margin-top: -67px !important; }. Внимавайте със свръхспецификация в CSS.   -  person benjarwar    schedule 26.08.2015
comment
Добре ще го направя. И под множество декларации имате предвид елементите от менюто? Не искам всички елементи от менюто да бъдат засегнати, а само изброените.   -  person dnat    schedule 26.08.2015
comment
Ако това е подмножество от елементите на менюто, можете поне да ги разделите със запетая и пак да имате едно правило, напр. #menu-item-1 .dropdown-menu, #menu-item-2 .drop-menu { ... }.   -  person benjarwar    schedule 26.08.2015

Отговори (1)


arrow_upward
1
arrow_downward

Разглеждайки кода на посочения URL адрес, забелязвам много конфликтни CSS. Позицията top на вашите .dropdown-menu елементи се задава многократно и се прави с !important декларации, което ще затрудни отмяната им.

Когато разгледах .dropdown-menu елементите в инспектора на Chrome и деактивирах всички top позициониране, като:

 .dropdown .dropdown-menu {
    top: 120% !important;
 }

Успях да видя менютата, които се появяват точно под техните тригери. Бих започнал, като го премахна и видя дали ще ви доближи.

Но накратко, не мисля, че има лесно решение тук без преработване на много от CSS. Също така мисля, че водите загубена битка, ако се опитвате да промените позицията само на шепата менюта, които се появяват на горния ред.

person benjarwar    schedule 26.08.2015