How can I prevent my Bootstrap navigation bar with a dropdown subnav from disappearing when I try to move my mouse down to the subnav? I want it to stay visible even as I move downwards. Any tips on achieving this for desktop only?
Thanks!
li.dropdown:hover>.dropdown-menu {
display: inline;
}
.dropdown-menu {
background-color: black !important;
border: none !important;
border-radius: 0px !important;
}
.dropdown-item {
color: white !important;
display: inline !important;
padding: .25rem 0.75rem !important;
line-height: 2.5rem;
}
.dropdown-item:hover{
background-color: transparent !important;
color: #FFB703 !important;
}
.mlauto1 {
float: right;
margin-right: 8px;
}
nav {
line-height: 2.5rem;
}
@media (min-width: 768px) {
li.dropdown.scale > .dropdown-menu {
display:block;
opacity: 0;
-o-transform: scale(0);
-ms-transform: scale(0);
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
-o-transition: -o-opacity 1.0s;
-ms-transition: -ms-opacity 1.0s;
-moz-transition: -moz-opacity 1.0s;
-webkit-transition: -webkit-opacity 1.0s;
}
li.dropdown.scale:hover > .dropdown-menu {
opacity: 1;
-o-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-full navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown scale position-static" id="parent">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
solutions
</a>
<div class="dropdown-menu w-100" aria-labelledby="navbarDropdown">
<div class="mlauto1">
<a class="dropdown-item mx-auto" href="#">subnav</a>
<a class="dropdown-item" href="#">subnav</a>
<a class="dropdown-item" href="#">subnav</a>
<a class="dropdown-item" href="#">subnav</a>
<a class="dropdown-item" href="#">subnav</a>
<a class="dropdown-item" href="#">subnav</a>
</div>
</div>
</li>
<li class="nav-item active">
<a class="nav-link active" href="#">our story</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">work</a>
</li>
</ul>
</div>
</nav>
</body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</html>