Agora
Testei com a última versão do Bootstrap e a versão 3.3.7 e esse problema não ocorre. Alguém faz ideia do que pode interferir neste funcionamento? Tinha um CSS a mais para os menus, mas nada referente à opacity.
Anteriormente
Pegamos um projeto há um tempo para fazer correções e melhorias e tem algo que não consigo ver erro da nossa parte, pelo motivo de não acontecer ao visualizar as páginas em celulares, apenas em PC, incluindo Notebook.
Se se um range de opacidade está em 100% que é o valor 1, o submenu de um dropdown não desaparece enquanto o mouse não sai dele, mas se está abaixo de 1, o submenu se comporta como se o mouse estivesse saindo dele rapidamente. Tentei fazer a mesma funcionalidade com JQuery e com Vanilla e o problema continua.
https://1drv.ms/v/s!Ap15WA7LCgcQ8n8JE5JYVQbxEAVX?e=YjY3Pb
// $('#rangeSuperior').on('input', () => {
// let valor = $('#rangeSuperior')[0].value
// $('#header')[0].style.opacity = valor
// configCardUp.style.opacity = valor
// $('#segundaBarra')[0].style.opacity = valor
// $('#nomeUsuario')[0].style.color = valor
// $('#navbaradmin a').each((chave, v) => { // Tinha usado o mesmo nome, "valor", para me referir ao mesmo elemento. Isso deu erro na pre visualização, onde alguns elementos a ficavam s/ mudança
// v.style.opacity = valor
// //console.log(v)
// })
// })
let rangeSuperior = document.getElementById('rangeSuperior')
rangeSuperior.addEventListener('input', () => {
let valor = rangeSuperior.value
document.getElementById('header').style.opacity = valor
configCardUp.style.opacity = valor
document.getElementById('segundaBarra').style.opacity = valor
document.querySelectorAll('li').forEach((valorCorrente, indice, vetor) => {
valorCorrente.style.opacity = valor
})
})