bootstrap responsive mega menu on hover code example

Example 1: bootstrap dropdown on hover

<body>
<style>
	.dropdown:hover>.dropdown-menu{
		display: block;
	}
</style>
</body>

Example 2: bootstrap mega menu responsive

<li class="nav-item dropdown">

	<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	Mega Dropdown
	</a>

	<div class="dropdown-menu pt-0" aria-labelledby="navbarDropdown">

		<img src="./img/cover.jpg" class="img-fluid" alt="" >

		<div class="d-flex align-items-start flex-column flex-sm-row p-3">

			<div>
				<div class="dropdown-header">Services</div>
				<a class="dropdown-item" href="#" >Développement web</a>
				<a class="dropdown-item" href="#" >Développement mobile</a>
				<a class="dropdown-item" href="#" >UX et Design</a>
				<a class="dropdown-item" href="#" >Infographie</a>
			</div>

			<div>
				<div class="dropdown-header">Technologies</div>
				<a class="dropdown-item" href="#" >HTML et CSS</a>
				<a class="dropdown-item" href="#" >BOOTSTRAP</a>
				<a class="dropdown-item" href="#" >PHP et LARAVEL</a>
				<a class="dropdown-item" href="#" >JAVASCRIPT et VUE.JS</a>
			</div>

			<div>
				<div class="dropdown-header">Outils</div>
				<a class="dropdown-item" href="#" >Visual Studio Code</a>
				<a class="dropdown-item" href="#" >Laragon</a>
				<a class="dropdown-item" href="#" >Google Chrome</a>
				<a class="dropdown-item" href="#" >Windows 10</a>
			</div>

		</div>

	</div>

</li>

Tags:

Html Example

Recent Posts