Cascading dropdowns on hover

Developer
Jay Holtslander
Size
3,527 Kb
Views
18,216
  1. Cascading dropdowns on hover Previews
  2. Cascading dropdowns on hover HTML Codes
  3. Cascading dropdowns on hover CSS Codes

How do I make an cascading dropdowns on hover?

What is a cascading dropdowns on hover? How do you make a cascading dropdowns on hover? This script and codes were developed by Jay Holtslander on 18 October 2022, Tuesday.

Cascading dropdowns on hover Previews
IQ Test

Cascading dropdowns on hover - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cascading dropdowns on hover</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="navbar"> <nav class="navbar navbar-inverse navbar-static-top" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"> Brand </a> </div> <div class="collapse navbar-collapse" id="navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Dropdown 1 <b class="caret"></b> </a> <ul class="dropdown-menu"> <li> <a href="#"> <i class="fa fa-fw fa-dot-circle-o"></i> Dropdown Link 1 </a> </li> <li> <a href="#"> <i class="fa fa-fw fa-dot-circle-o"></i> Dropdown Link 2 </a> </li> <li> <a href="#"> <i class="fa fa-fw fa-dot-circle-o"></i> Dropdown Link 3 </a> </li> <li class="dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-fw fa-dot-circle-o"></i> Dropdown Link 4 </a> <ul class="dropdown-menu"> <li> <a href="#"> <i class="fa fa-fw fa-dot-circle-o"></i> Dropdown Submenu Link 4.1 </a> </li> <li> <a href="#"> <i class="fa fa-fw fa-dot-circle-o"></i> Dropdown Submenu Link 4.2 </a> </li> <li> <a href="#"> <i class="fa fa-fw fa-dot-circle-o"></i> Dropdown Submenu Link 4.3 </a> </li> <li> <a href="#"> <i class="fa fa-fw fa-dot-circle-o"></i> Dropdown Submenu Link 4.4 </a> </li> </ul> </li> <li class="dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-fw fa-dot-circle-o"></i> Dropdown Link 5 </a> <ul class="dropdown-menu"> <li> <a href="#"> <i class="fa fa-fw fa-dot-circle-o"></i> Dropdown Submenu Link 5.1 </a> </li> <li> <a href="#"> <i class="fa fa-fw fa-dot-circle-o"></i> Dropdown Submenu Link 5.2 </a> </li> <li> <a href="#"> <i class="fa fa-fw fa-dot-circle-o"></i> Dropdown Submenu Link 5.3 </a> </li> <li class="dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-fw fa-dot-circle-o"></i> Dropdown Submenu Link 5.4 </a> <ul class="dropdown-menu"> <li> <a href="#"> <i class="fa fa-fw fa-dot-circle-o"></i> Dropdown Submenu Link 5.4.1 </a> </li> <li> <a href="#"> <i class="fa fa-fw fa-dot-circle-o"></i> Dropdown Submenu Link 5.4.2 </a> </li> </ul> </li> </ul> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Dropdown 2 <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">Dropdown2 Link 1</a></li> <li><a href="#">Dropdown2 Link 2</a></li> <li><a href="#">Dropdown2 Link 3</a></li> <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown2 Link 4</a> <ul class="dropdown-menu"> <li><a href="#">Dropdown2 Submenu Link 4.1</a></li> <li><a href="#">Dropdown2 Submenu Link 4.2</a></li> <li><a href="#">Dropdown2 Submenu Link 4.3</a></li> <li><a href="#">Dropdown2 Submenu Link 4.4</a></li> </ul> </li> <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown2 Link 5</a> <ul class="dropdown-menu"> <li><a href="#">Dropdown2 Submenu Link 5.1</a></li> <li><a href="#">Dropdown2 Submenu Link 5.2</a></li> <li><a href="#">Dropdown2 Submenu Link 5.3</a></li> <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4</a> <ul class="dropdown-menu"> <li><a href="#">Dropdown2 Submenu Link 5.4.1</a></li> <li><a href="#">Dropdown2 Submenu Link 5.4.2</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> </nav>
</div>
<div class="container"> <div class="text-center"> <h1>Bootstrap 3 Cascading dropdowns<br><small>Multiple level menus</small></h1> <p>Not working properly on mobile though. Doh.</p> </div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</body>
</html>

Cascading dropdowns on hover - Script Codes CSS Codes

.dropdown-submenu { position: relative;
}
.dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; border-radius: 0 6px 6px 6px;
}
.dropdown-submenu > a:after { border-color: transparent transparent transparent #333; border-style: solid; border-width: 5px 0 5px 5px; content: " "; display: block; float: right; height: 0; margin-right: -10px; margin-top: 5px; width: 0;
}
.dropdown-submenu:hover > a:after { border-left-color: #555;
}
@media (max-width: 767px) { .navbar-default .navbar-nav, .navbar-inverse .navbar-nav { display: inline; } .navbar-default .navbar-nav .open .dropdown-menu > li > a, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { color: #9d9d9d; } .navbar-default .navbar-brand, .navbar-inverse .navbar-brand { display: inline; } .navbar-default .navbar-toggle .icon-bar, .navbar-inverse .navbar-toggle .icon-bar { background-color: #fff; } .navbar-default .dropdown-menu > li > a, .navbar-inverse .dropdown-menu > li > a { color: red; } .navbar-default .dropdown-menu > li > a:hover, .navbar-inverse .dropdown-menu > li > a:hover { background-color: #ccc; } .navbar-default .dropdown-menu > li > a:focus, .navbar-inverse .dropdown-menu > li > a:focus { background-color: #ccc; } .navbar-nav .open .dropdown-menu { border-bottom: 1px solid white; border-radius: 0; } .dropdown-menu { padding-left: 10px; } .dropdown-menu .dropdown-menu { padding-left: 20px; } .dropdown-menu .dropdown-menu .dropdown-menu { padding-left: 30px; } li.dropdown.open { border: 0px solid red; }
}
@media (min-width: 768px) { ul.nav li:hover > ul.dropdown-menu { display: block; } #navbar { text-align: center; }
}
/* DEMO STYLES */
body { background-color: #583e7e; color: #fff;
}
h1 { font-size: 5vw;
}
h1 small { color: #fff; opacity: 0.5;
}
Cascading dropdowns on hover - Script Codes
Cascading dropdowns on hover - Script Codes
Home Page Home
Developer Jay Holtslander
Username j_holtslander
Uploaded October 18, 2022
Rating 3
Size 3,527 Kb
Views 18,216
Do you need developer help for Cascading dropdowns on hover?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jay Holtslander (j_holtslander) Script Codes
Name
Bootstrap 3 bio thumbs with social overlay on hover
Bootstrap 4 Alpha - Pen Template
Bootstrap 4 Posts layout
Bootstrap Product Carousel
Multiple Bootstrap Navbars
Flexbox Vertical Centering in Bootstrap 3
Materialize - Transparent Navbar
Bootstrap 3 full height carousel
Texture-filled Text in Webkit
Bootstrap 3 Navbar under a header
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!