Snippets Collections
<script>
  let items = document.querySelector(".header__inline-menu").querySelectorAll("details");
  console.log(items)
  items.forEach(item => {
    item.addEventListener("mouseover", () => {
      item.setAttribute("open", true);
      item.querySelector("ul").addEventListener("mouseleave", () => {
        item.removeAttribute("open");
      });
    item.addEventListener("mouseleave", () => {
      item.removeAttribute("open");
    });
  });
  
  });
</script>
document.addEventListener("DOMContentLoaded", function(){
// make it as accordion for smaller screens
if (window.innerWidth > 992) {

	document.querySelectorAll('.navbar .nav-item').forEach(function(everyitem){

		everyitem.addEventListener('mouseover', function(e){

			let el_link = this.querySelector('a[data-bs-toggle]');

			if(el_link != null){
				let nextEl = el_link.nextElementSibling;
				el_link.classList.add('show');
				nextEl.classList.add('show');
			}

		});
		everyitem.addEventListener('mouseleave', function(e){
			let el_link = this.querySelector('a[data-bs-toggle]');

			if(el_link != null){
				let nextEl = el_link.nextElementSibling;
				el_link.classList.remove('show');
				nextEl.classList.remove('show');
			}


		})
	});

}
// end if innerWidth
}); 
// DOMContentLoaded  end
//HTML
<div class='dropdown'>
          <Link id='product' className='every' to='/products'>OUR PRODUCTS</Link>
           <div class='dropdown-content'>
            <Link to='autocadd'>AutoCadd</Link>
            <Link to='techset'>Techset</Link>
            <Link to='Endorse'>Endorse</Link>
           </div>
          </div>

//CSS

.dropdown{
    position: relative;
    display: inline-block;
}
.dropdown-content{
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content>*{
 color: black;
 padding: 12px 6px;
text-decoration: none;
 display: block;
}

.dropdown:hover .dropdown-content{
    display: block;
}
.dropdown-content>*:hover{
    background-color: #ddd;
}
.underline {
    position: relative;
}

.underline::after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000;
}
.box-shadow::after {
  content: "";
  position: absolute;
  width: 100%;
  bottom: -1px;
  z-index: -1;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.4);
}

.element {
  position: relative;
}

<div class="element box-shadow">
  <!-- content here -->
 </div>
.element::before {
    content: "";
    position: absolute;
    top: -18px; /* positions arrow on top of container */
    left: 50%; /* works with transform to center the arrow */
    transform: translateX(-50%);
    border: 10px solid; /* creates a 10px box */
/*  border-color: red green yellow black; */ 
    border-color: transparent transparent white transparent;
    /* the red/green etc used for testing, then swap to transparent version */
}
star

Thu Aug 25 2022 12:37:09 GMT+0000 (Coordinated Universal Time) https://websensepro.comblog/how-to-show-drop-down-on-hover-in-dawn-theme/

#dropdown #hoveraffect #dawntheme
star

Mon Aug 22 2022 08:57:18 GMT+0000 (Coordinated Universal Time) https://bootstrap-menu.com/detail-basic-hover.html

#bootstrap #css #javascript #hover #dropdown
star

Thu Aug 04 2022 05:08:50 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover

#javascript #react #css #button #hover #dropdown
star

Sat Jul 23 2022 14:18:42 GMT+0000 (Coordinated Universal Time)

#powerapps #choices #combobox #dropdown
star

Sun Feb 28 2021 19:02:18 GMT+0000 (Coordinated Universal Time)

#dropdown,absolute,center #dropdown
star

Sun Feb 28 2021 19:00:20 GMT+0000 (Coordinated Universal Time)

#dropdown #absolute,center
star

Sun Feb 28 2021 18:58:12 GMT+0000 (Coordinated Universal Time)

#dropdown

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension