Natasha000
@Natasha000

Как Подчеркнуть первый уровень раскрывающегося меню?

Сайт на WordPress.
Код меню следующий :
<style>
  
/* Enable class below once you're done editing the menu */ 
   

.dropdown-menu {
visibility: hidden;
}

  
.category-menu .et_pb_menu__menu .dropdown-menu {
visibility: hidden;
opacity: 0;

-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1);    
  
position: absolute!important;
top: 75px;
bottom: auto;
left: auto;
right: auto;
}
  
.category-menu .et_pb_menu__menu li.first-level:hover .dropdown-menu {
visibility: visible;
opacity: 1;
}

.category-menu  .et_pb_menu__menu li {
margin-top: 0px !important;
} 

.category-menu .et_pb_menu__menu li>a {
margin-top: 0px !important;
padding: 30px 20px !important;    
}
 
.category-menu .et_mobile_menu .dropdown-menu {
background-color: white; 
padding-top: 5px;
padding-bottom: 5px;
}   

.category-menu .et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.category-menu .et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
color: #FF6600;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.category-menu .et_mobile_menu .first-level > .icon-switch:after{
content: '\21';
color: #c9c9c9;
}
  
.category-menu .et_mobile_menu .dropdown-menu {
display: none;
}
  
.category-menu .et_mobile_menu .dropdown-menu.reveal-items {
display: block;
}
  
.category-menu .et_pb_menu__menu>nav>ul>li {
position: static !important;
}

.category-menu .et_mobile_menu .dropdown-menu {
visibility: visible !important;
}
  
</style>  

<script>
  
jQuery(function($){
$(document).ready(function(){
  

$('.dropdown-menu').each(function(i){
  
i = i + 1;
  
var $dropdown = $('.dropdown-menu-' + i);
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdown.insertAfter($mainMenuItem);
  
});  
  
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu .dropdown-menu');

$firstLevel.off('click').click(function() {

$(this).attr('href', '#');  
var $thisDropdown = $(this).siblings(); 

$thisDropdown.slideToggle();
$(this).toggleClass('icon-switch');

var dropdownSiblings = $allDropdowns.not($thisDropdown);   
dropdownSiblings.slideUp();

var $thisFirstLevel = $(this);
var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);
$firstLevelSiblings.removeClass('icon-switch');  

});      
  
});
});
</script>

Каждому верхнему меню присвоен класс: first-level first-level-1, first-level first-level-2, etc
Каждому выпадающему меню присвоен класс: dropdown-menu dropdown-menu-1, dropdown-menu dropdown-menu-2, etc
Чтобы подчеркнуть первый уровень, я нашел в Интернете следующий код, но в моем случае он работает некорректно.
#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
 content: "";
 position: absolute;
 z-index: 2;
 left: 0;
 right: 0;
}

.et_pb_menu__menu a:before {
 content: "";
 position: absolute;
 z-index: -2;
 left: 0;
 right: 100%;
 bottom: 0%;
 background: #000000; /*** COLOR OF THE LINE ***/
 height: 2px; /*** THICKNESS OF THE LINE ***/
 -webkit-transition-property: right;
 transition-property: right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
.et_pb_menu__menu li a:hover {
 opacity: 1 !important;
}
.et_pb_menu__menu li a:hover:before {
 right: 0;
}
.et_pb_menu__menu li li a:before {
 bottom: 10%;
}

Сейчас это выглядит так:
60acd4f9efbd5662347339.png
Нужно вот так:
60acd524b1d59369098204.png
  • Вопрос задан
  • 102 просмотра
Решения вопроса 1
azerphoenix
@azerphoenix
Java Software Engineer
Natasha000, добрый день! Было бы неплохо предоставить ссылку на сайт. Так будет проще что-либо подсказать.
А если отвечать общими словами, то попробуйте например:

.category-menu .et_pb_menu__menu li.first-level {
border-bottom: 2px solid #ff0000;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы