我尝试使用jQuery的fadeIn
和css
可见性,但是没有运气。有人可以帮我吗?
我将.menu-item-has-children
用作父菜单,将.sub-menu
用作子菜单。我想实现:
.menu-item-has-children {}
.sub-menu {
z-index: 999;
min-width: 200px;
display: none;
position: absolute;
padding: 0;
margin: 0;
background-color: #e6e6e6;
}
.menu-item-has-children:after {
content: "\f0dd";
font-family: 'Font Awesome 5 Free';
left: 85%;
position: absolute;
top: 50%;
font-weight: 900;
transform: translate(-50%, -50%);
}
ul.sub-menu li {
display: block;
text-align: left;
}
li.menu-item-has-children:hover .sub-menu {
display: block;
transition: all 300ms ease-in-out;
}
ul.sub-menu li a {
padding: 10px 30px;
color: #808080;
text-transform: capitalize;
}
ul.sub-menu li a:hover {
color: #000;
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<?php
// navigation menu
wp_nav_menu(array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
'container' => false,
'items_wrap' => '%3$s'
));
?>
</ul>
</div>
</div>
</nav>