Not fully sure what you tried to do. But i guess you wanted to create horizontal drop-down menu with with sub-menu items. If so, I suggest you the following simplified code:
HTML:
<div class="dropdown">
<button class="dropbtn">1111
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">2222
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 4</a>
<a href="#">Link 5</a>
<a href="#">Link 6</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">3333
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 7</a>
<a href="#">Link 8</a>
<a href="#">Link 9</a>
</div>
</div>
</div>
CSS:
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
If this what you meant, I hope it helps!
I am creating a horizontal dropdown menu under one of the main menu items. I want the sub-menu to expand on mouseover and close on mouse out. This effect works properly but when you scroll down and the affix top class is activated, on mouseover of the main menu item with the sub-menu items, the main menu disappears. If you mouseover other main menu items this does not cause any issue and the affix top class works just fine. This happens only when you mouse over the parent div of the sub-menu divs and when you have scrolled down so that the affix top class is activated. But if you scroll back up, it is there. Any help will be appreciated, please. My codes are shared below.
$(document).ready(function(){
var parent = document.getElementById("parent");
var dropdown = document.getElementById("dropdown");
var child = document.getElementById("child")
parent.addEventListener("mouseover", expand);
parent.addEventListener("mouseout", close);
dropdown.addEventListener("mouseover", expand);
dropdown.addEventListener("mouseout", close);
function expand() {
parent.style.background = "#aaa";
parent.style.color = "#fff";
dropdown.style.background = "#aaa";
dropdown.style.display = "inline-block";
mainnav.className = "expand";
}
function close() {
dropdown.style.display = "none";
parent.style.background = "#817f7f";
mainnav.className = "";
}
})
#mainnav {
background: rgb(129, 127, 127);
color: #333;
font-weight: bold;
text-transform:uppercase;
letter-spacing: .05em;
z-index: 1000;
height: 47px;
transition: .5s ease-in-out;
}
#mainnav.expand {
height: 94px;
transition: .5s ease-in-out;
}
#mainnav #menu {
display: none;
padding: .8em 1.5em;
cursor: pointer;
overflow:hidden;;
}
#mainnav ul {
display: block;
margin: 0;
text-align: right;
}
#mainnav ul li {
margin: 0;
list-style: none;
display: inline-block;
}
#mainnav ul li a {
color: #fff;
font-size: .75em;
text-decoration: none;
display: inline-block;
padding: .9em 1.5em .8em 1.5em;
}
#dropdown > ul li a {
color: #fff;
font-size: .75em;
text-decoration: none;
display: inline-block;
padding: .9em 1.5em .8em 1.5em;
}
#mainnav ul li a:hover {
color: #000;
background: #aaa;
transition: .5s ease-in-out;
}
#mainnav #child{
width: 100vw !important;
margin-left: calc((100% - 100vw) / 2);
display: block;
background-color: #aaa;
text-align: center;
color:#fff;
transition: 1s ease-in-out;
}
#mainnav #dropdown {
display: none;
overflow:hidden !important;
height: 100%;
}
/* STICKY ON SCROLL NAV */
nav.affix {
top: 0 !important;
left: 0;
right: 0;
width: 100% !important;
}
<nav id="mainnav" class="group" data-spy = "affix", data-offset-top="100">
<div class="container">
<div id="menu">≡ Menu</div>
<ul class="menu">
<li><a href="#">1111</a></li>
<li><a href="#">2222</a></li>
<li id="parent"><a href="#">3333</a></li>
<li><a href="#">4444</a></li>
<li><a href="#">5555</a></li>
</ul>
<div id="child">
<ul id="dropdown">
<li class="child"><a href="#">A</a></li>
<li class="child"><a href="#">B</a></li>
<li class="child"><a href="#">C</a></li>
<li class="child"><a href="#">D</a></li>
<li class="child"><a href="#">ORM</a></li>
<li class="child"><a href="#">E</a></li>
</ul>
</div>
</div>
</nav>
Thank you @jkalandarov for your response. Yes, I want to create a full-width horizontal dropdown menu on hover. The parent menu is also horizontal. But I want to have the submenu display as block across the entire container like the parent menu onmouseover. My code works 98% as desired. My only issue i guess is with the jquery script and I have battled it for days now. When the .affix class is active, meaning when i have scrolled down to 100px and the nav is now affixed, on mouseover of the particular menu item with the submenus the whole tab disappears. Thanks.
