Я пытаюсь создать вертикальное меню navbar с помощью uikit navbar .
Но при этом автоматически устанавливается верхнее поле для выпадающего меню.
Таким образом, раскрывающийся список не работает должным образом при установке верхнего поля.
Вот CSS и HTML:
.vertical {
display: block!important;
max-width: 200px !important;
}
.vertical ul.uk-navbar-nav{
display: block;
margin: 0;
padding: 0;
}
.vertical ul.uk-navbar-nav li > div.uk-navbar-dropdown
{
left: 210px !important;
}
.vertical ul.uk-navbar-nav >li {
float: left;
padding: 0 15px;
margin-bottom: -20px!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.6/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.6/css/uikit.min.css" rel="stylesheet"/>
<nav class="uk-navbar-container vertical uk-navbar" uk-navbar="mode:click;">
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
<li><a href="#">Item</a></li>
</ul>
</div>
</nav>
Пожалуйста, помогите об этом.
Спасибо