I'm using Metro UI CSS 2.0 from https://metroui.org.ua/v2/ and use a menu bar. Now I wanna make dropdown is auto on hover (now it just dropdown when click). I read the manual but cannot apply to that.
How can I make that hoverable ?
This is head:
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="description" content="Metro, a sleek, intuitive, and powerful framework for faster and easier web development for Windows Metro Style.">
<meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, metro, front-end, frontend, web development">
<meta name="author" content="Sergey Pimenov and Metro UI CSS contributors">
<link rel='shortcut icon' type='image/x-icon' href='../favicon.ico' />
<title>Template :: Metro UI CSS - The front-end framework for developing projects on the web in Windows Metro Style</title>
<link href="../css/metro.css" rel="stylesheet">
<link href="../css/metro-icons.css" rel="stylesheet">
<link href="../css/metro-responsive.css" rel="stylesheet">
<script src="../js/jquery-2.1.3.min.js"></script>
<script src="../js/jquery.dataTables.min.js"></script>
<script src="../js/metro.js"></script>
<style>
html, body {
height: 100%;
}
body {
}
.page-content {
padding-top: 3.125rem;
min-height: 100%;
height: 100%;
}
.table .input-control.checkbox {
line-height: 1;
min-height: 0;
height: auto;
}
@media screen and (max-width: 800px){
#cell-sidebar {
flex-basis: 52px;
}
#cell-content {
flex-basis: calc(100% - 52px);
}
}
</style>
This is body:
<body class="bg-steel">
<nav class="app-bar fixed-top darcula" data-role="appbar">
<a class="app-bar-element branding">BrandName</a>
<span class="app-bar-divider"></span>
<ul class="app-bar-menu">
<li><a href="">Dashboard</a></li>
<li>
<a href="" class="dropdown-toggle">Project</a>
<ul class="d-menu" data-role="dropdown">
<li><a href="">New project</a></li>
<li class="divider"></li>
<li>
<a href="" class="dropdown-toggle">Reopen</a>
<ul class="d-menu" data-role="dropdown">
<li><a href="">Project 1</a></li>
<li><a href="">Project 2</a></li>
<li><a href="">Project 3</a></li>
<li class="divider"></li>
<li><a href="">Clear list</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Security</a></li>
<li><a href="">System</a></li>
<li>
<a href="" class="dropdown-toggle">Help</a>
<ul class="d-menu" data-role="dropdown">
<li><a href="">ChatOn</a></li>
<li><a href="">Community support</a></li>
<li class="divider"></li>
<li><a href="">About</a></li>
</ul>
</li>
</ul>
<div class="app-bar-element place-right">
<span class="dropdown-toggle"><span class="mif-cog"></span> User Name</span>
<div class="app-bar-drop-container padding10 place-right no-margin-top block-shadow fg-dark" data-role="dropdown" data-no-close="true" style="width: 220px">
<h2 class="text-light">Quick settings</h2>
<ul class="unstyled-list fg-dark">
<li><a href="" class="fg-white1 fg-hover-yellow">Profile</a></li>
<li><a href="" class="fg-white2 fg-hover-yellow">Security</a></li>
<li><a href="" class="fg-white3 fg-hover-yellow">Exit</a></li>
</ul>
</div>
</div>
</nav>
Add class="dropdown-menu" and data-show="hover" attribute to the dropdown menu (the <ul> element).