Я пытался сделать мега-меню с bootstrap. Я использую код выпадающего меню и делаю некоторые изменения в коде, но ссылки в выпадающем списке не работают, только если я открываю ссылку в новой вкладке. В противном случае, когда я нажимаю на ссылку, она закрывает выпадающее меню. Я думаю, может быть, что-то не так с классом или js, но я не уверен.
#logo{
position: relative;
left: 50%;
margin-left: -50px !important; /* 50% of your logo width */
display: block;
}
#navbar{
position: -webkit-sticky;
padding-bottom: 10px;
padding-top: 10px;
z-index: 100;
background-color: #282b2e!important;
margin-bottom: 0px;
border-radius: 0px;
}
body {
margin: 0;
}
#megamenu{
padding: 30px;
}
#navlink{
margin-left: 15px;
margin-right: 15px;
color: #bfbfbf;
font-size: 16px;
}
#megamenucol{
align-self: baseline;
}
#navlink{
color: #bfbfbf;
}
#navlink:focus, #navlink:hover {
color: rgb(211, 152, 48);
}
.hvr-underline-from-center:before {
content: "";
position: absolute;
z-index: -1;
left: 51%;
right: 51%;
bottom: 0;
background: #d39830;
height: 4px;
-webkit-transition-property: left,right;
transition-property: left,right;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#megamenu {
position: absolute;
background: #54595f;
border-radius: 0px;
margin-top: 0px;
}
#h6{
color: #bfbfbf;
font-size: 14px;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid #d39830;
}
#dropdownitem {
display: block;
width: 100%;
padding: .25rem 1.5rem;
clear: both;
font-weight: 400;
color: #bfbfbf;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0;
font-size: 14px;
}
#dropdownitem:focus, #dropdownitem:hover {
color: #d39830;
text-decoration: none;
background-color: #f8f9fa00;
font-size: 14px;
}