We Keep Coding

Rotate Icon on click

I have made a website with a navigation menu, there are also two dropdown menus, I have also placed 2 font awesome icons arrows on each of the dropdowns, but I am unsure how to make them rotate on when clicking the dropdown menus. I would like them to rotate 90 degrees down. I have already made the classes for the sub menus,
let click = document.querySelector('.click');
let list = document.querySelector('.Sub-menu-1');
click.addEventListener("click", () => {
list.classList.toggle('NewSub-menu-1');
});
let click2 = document.querySelector('.click2');
let list2 = document.querySelector('.Sub-menu-2');
click2.addEventListener("click", () => {
list2.classList.toggle('NewSub-menu-2');
});
.nav-Links ul li .Sub-menu-1 ul li,
.nav-Links ul li .Sub-menu-2 ul li {
width: 110px;
padding: 5px;
background: transparent;
border-radius: 0;
text-align: left;
}
.fas.fa-chevron-left {
display: inline-block;
padding-left: 5px;
}
<div class="nav-Links" id="navLinks">
<i class="fas fa-times" onclick="hideMenu()"></i>
<ul>
<li> Home </li>
<li> About Us </li>
<li class="click2">
Recruiting <span class="fas fa-chevron-left"></span>
<div class="Sub-menu-2">
<ul>
<li>Number 1</li>
<li>Number 2</li>
</ul>
</div>
</li>
<li> Contact Us </li>
<li> Leave Request </li>
<li class="click"> CadetLinks <span class="fas fa-chevron-left"></span>
<div id="navLinks1" class="Sub-menu-1">
<ul>
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
</ul>
</div>
</li>
</ul>
</div>

You can try this
list.onclick=function(){
list.style.transform="rotate(90deg)";
}
list2.onclick=function(){
list2.style.transform="rotate(90deg)";
}

Just used another icon but you can get the idea:
let click = document.querySelector('.click');
let list = document.querySelector('.Sub-menu-1');
click.addEventListener("click", () => {
list.classList.toggle('NewSub-menu-1');
document.querySelector('.click .flaticon-hand-10').classList.toggle('gly');
});
let click2 = document.querySelector('.click2');
let list2 = document.querySelector('.Sub-menu-2');
click2.addEventListener("click", () => {
list2.classList.toggle('NewSub-menu-2');
document.querySelector('.click2 .flaticon-hand-10').classList.toggle('gly');
});
.nav-Links ul li .Sub-menu-1 ul li,
.nav-Links ul li .Sub-menu-2 ul li {
width: 110px;
padding: 5px;
background: transparent;
border-radius: 0;
text-align: left;
}
.fas.fa-chevron-left {
display: inline-block;
padding-left: 5px;
}
#font-face {
font-family: 'Flaticon';
src: url('data:font/ttf;base64,AAEAAAANAIAAAwBQRkZUTWzLl7IAAAV4AAAAHEdERUYAMQAGAAAFWAAAACBPUy8yL7pL5QAAAVgAAABWY21hcMARI74AAAHAAAABSmdhc3D//wADAAAFUAAAAAhnbHlmwP2S0wAAAxgAAABwaGVhZARhaP0AAADcAAAANmhoZWED0gHFAAABFAAAACRobXR4BgAAHgAAAbAAAAAQbG9jYQA4AAAAAAMMAAAACm1heHAARwAoAAABOAAAACBuYW1liNt9UwAAA4gAAAGScG9zdJJ3apwAAAUcAAAAMQABAAAAAQAAIRWaJV8PPPUACwIAAAAAANGhFEAAAAAA0aEUQAAe/8AB4gHAAAAACAACAAAAAAAAAAEAAAHA/8AALgIAAAAAAAHiAAEAAAAAAAAAAAAAAAAAAAAEAAEAAAAEACUAAQAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQIAAZAABQAIAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAIABQkAAAAAAAAAAAAAEAAAAAAAAAAAAAAAUGZFZABA4ADgAAHA/8AALgHAAEAAAAABAAAAAAAAAgAAAAAAAAACAAAAAgAAHgAAAAMAAAADAAAAHAABAAAAAABEAAMAAQAAABwABAAoAAAABgAEAAEAAgAA4AD//wAAAADgAP//AAAgAwABAAAAAAAAAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOAAAAAEAHv/AAeIBwAAkAAAlIgcuASMiBy4BIyIHNTQmIgYdAScuAQ4BHwEeATsBMjY9ATQmAa0ODQMdExANBRsRDgwfLB8SDyshAg5zEjYYcS9CH9sHEhgIDxMIexYfHxbtFRADHSwQgRIaOyqBFh8AAAAAAAwAlgABAAAAAAABAAgAEgABAAAAAAACAAcAKwABAAAAAAADACQAfQABAAAAAAAEAAgAtAABAAAAAAAFAAsA1QABAAAAAAAGAAgA8wADAAEECQABABAAAAADAAEECQACAA4AGwADAAEECQADAEgAMwADAAEECQAEABAAogADAAEECQAFABYAvQADAAEECQAGABAA4QBmAGwAYQB0AGkAYwBvAG4AAGZsYXRpY29uAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAABGAG8AbgB0AEYAbwByAGcAZQAgADIALgAwACAAOgAgAGYAbABhAHQAaQBjAG8AbgAgADoAIAAxADMALQA2AC0AMgAwADEANQAARm9udEZvcmdlIDIuMCA6IGZsYXRpY29uIDogMTMtNi0yMDE1AABmAGwAYQB0AGkAYwBvAG4AAGZsYXRpY29uAABWAGUAcgBzAGkAbwBuACAAMQAuADAAAFZlcnNpb24gMS4wAABmAGwAYQB0AGkAYwBvAG4AAGZsYXRpY29uAAAAAAIAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAABAAAAAEAAgECBmhhbmQxMAAAAAAAAAH//wACAAEAAAAOAAAAGAAAAAAAAgABAAMAAwABAAQAAAACAAAAAAABAAAAAMmJbzEAAAAA0aEUQAAAAADRoRRA') format('truetype');
font-weight: normal;
font-style: normal;
}
[class^="flaticon-"]:before,
[class*=" flaticon-"]:before,
[class^="flaticon-"]:after,
[class*=" flaticon-"]:after {
font-family: Flaticon;
font-size: 20px;
font-style: normal;
margin-left: 20px;
}
.flaticon-hand-10:before {
content: "\e000";
}
li > i {
transition: all .2s ease;
}
.gly {
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.5);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
display: inline-block;
}
<div>
<ul>
<li class="click2">
Recruiting
<i class="flaticon-hand-10"></i>
<div class="Sub-menu-2">
<ul>
<li>Number 1</li>
<li>Number 2</li>
</ul>
</div>
</li>
<li> Contact Us </li>
<li> Leave Request </li>
<li class="click"> CadetLinks
<i class="flaticon-hand-10"></i>
<div id="navLinks1" class="Sub-menu-1">
<ul>
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
</ul>
</div>
</li>
</ul>
</div>

Try this. The transform is done on hover but you can use different events.
.nav-Links ul li .Sub-menu-1 ul li,
.nav-Links ul li .Sub-menu-2 ul li {
width: 110px;
padding: 5px;
background: transparent;
border-radius: 0;
text-align: left;
}
.fas.fa-chevron-left {
display: inline-block;
padding-left: 5px;
}
.link-icon{
transition:2s;
}
.link-icon:hover{
-o-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
transform:rotate(-90deg);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<ul>
<li> Home </li>
<li> About Us </li>
<li class="click2">
Recruiting <span class="link-icon fas fa-chevron-left"></span>
<div class="Sub-menu-2">
<ul>
<li>Number 1</li>
<li>Number 2</li>
</ul>
</div>
</li>
<li> Contact Us </li>
<li> Leave Request </li>
<li class="click"> CadetLinks <span class="fas fa-chevron-left"></span>
<div id="navLinks1" class="Sub-menu-1">
<ul>
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
</ul>
</div>
</li>
</ul>
</div>

How To Place Mega Drop Down Menu With Position Relative?

I have Created Mega Menu.
On button click mega menu will create and drop down will come down.
The mega menu content bar will hide slider.
I want to move slider down when menu dropdown appears and and the position of slider is replaced by mega menu content.
Dropdown mega menu is in absolute position. if i change it to relative it will replace position of slider with mega menu dropdown content.But styling navbar is disturbed.
this is navigation code
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse navbar-left">
<ul class="nav navbar-nav">
<li class="dropdown menu-large">
Home <b class="caret"></b>
<ul class="dropdown-menu megamenu row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Software</li>
<li>Desktop</li>
<li class="disabled">Mobile</li>
<li>Tablet</li>
<li class="divider"></li>
<li class="dropdown-header">Hardware</li>
<li>Arduino</li>
<li>Raspberry PI</li>
<li>VoCore</li>
<li>Banana PI</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Nano-Tech</li>
<li>AFM</li>
<li>STM</li>
<li>Nano-Tubes</li>
<li>Nano-Wires</li>
<li>Materials</li>
<li class="divider"></li>
<li class="dropdown-header">A.I.</li>
<li>Artificial Intelligence</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">SaaS</li>
<li>On-Demand</li>
<li>No Software</li>
<li>Cloud Computing</li>
<li class="divider"></li>
<li class="dropdown-header">On-Premise</li>
<li>Data Center</li>
<li>Hosting Environment</li>
<li>Internal IT</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Server-Side</li>
<li>PHP</li>
<li>Java</li>
<li>Python</li>
<li>Ruby</li>
<li>ColdFusion</li>
<li>ASP.NET</li>
<li>GO</li>
<li>Perl</li>
<li>Lasso</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Javascript to open dropdown
<script>
$(document).ready(function() {
jQuery(document).ready(function(){
$(".dropdown").hover(
function() { $('.dropdown-menu', this).stop().fadeIn("fast");
},
function() { $('.dropdown-menu', this).stop().fadeOut("fast");
});
});
}
</script>
css
.menu-large {
position: static !important;
}
.megamenu {
padding: 20px 0px;
width: 100%;
}
.megamenu>li>ul {
padding: 0;
margin: 0;
}
.megamenu>li>ul>li {
list-style: none;
}
.megamenu>li>ul>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.megamenu>li ul>li>a:hover,
.megamenu>li ul>li>a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.megamenu.disabled>a,
.megamenu.disabled>a:hover,
.megamenu.disabled>a:focus {
color: #999999;
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
color: #00A7E8;
}
.megamenu.disabled>a:hover,
.megamenu.disabled>a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
cursor: not-allowed;
}
.megamenu.dropdown-header {
color: #428bca;
font-size: 18px;
}

If you code this in jsFiddle or codepen or just combine html,css,and js code without php then we can see the real problem.
I'm not able to run you code.
But as per your question i can say it may be issue with z-index.

submenu is not positioning as desired

I want to make my dropdown menu like in the image below. The problem is when I hover on the second item of main menu, the submenu leaves a margin from top as shown on left hand side of picture. I do not want that empty space. I want the submenu to always show on the same size and position for all the main menu options which have a submenu.
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
margin-left:0px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu > a:after {
content: " ";
display: block;
float: right;
height: 0;
margin-right: -1px;
margin-top: 5px;
width: 190px;
padding-left:10px;
}
#abg > li > a:hover, #abg > .active > a:hover {
text-decoration: none;
background-color:#49b3e7;
padding-top:15px;
padding-bottom:20px;
}
#media (max-width: 767px) {
.navbar-nav {
display: inline;
}
.navbar-default .navbar-brand {
display: inline;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-default .navbar-nav .dropdown-menu > li > a {
color: red;
background-color: #ccc;
border-radius: 4px;
margin-top: 2px;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #333;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
background-color: #ccc;
}
.navbar-nav .open .dropdown-menu {
border-bottom: 1px solid white;
border-radius: 0;
}
.dropdown-menu {
padding-left: 10px;
}
.dropdown-menu .dropdown-menu {
padding-left: 20px;
}
.dropdown-menu .dropdown-menu .dropdown-menu {
padding-left: 30px;
}
li.dropdown.open {
border: 0px solid red;
}
}
#media (min-width: 768px) {
ul.nav li:hover > ul.dropdown-menu {
display: block;
}
#navbar {
text-align: center;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="navbar">
<nav class="navbar navbar-default navbar-fixed-top hidden-xs " role="navigation" style="background-color:#49b3e7;color:white;margin-top:50px;cursor:pointer">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown" style="cursor:pointer">
<span class="dropdown-toggle" data-toggle="dropdown" style="color:white;cursor:pointer;">All Products </span><span class="caret" style="color:white;cursor:pointer;"></span>
<ul class="dropdown-menu" id="abg">
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Grocery</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;text-align: -webkit-match-parent;">
<li>Meals & Prep</li>
<li>Spreads & Sweeteners</li>
<li>Breafast</li>
<li>Salty Snacks</li>
<li>Chocolate & Candy</li>
<li>Condiments & Spices</li>
<li>Fruits & Nuts</li>
<li>Cookies & Bars</li>
<hr>
<li>Shop All Grocery</li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> Dole-licious </br>Snacks </h3>
<img src="grocery1.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Beverages</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;text-align: -webkit-match-parent;">
<li>Coffee & Tea</li>
<li>Dairy</li>
<li>Jucies</li>
<li>Mixes</li>
<li>Sports & Energy</li>
<li>Water & Sparkling</li>
<hr>
<li>Shop All Beverages</li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-61px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:77px;margin-top:163px;"> Flavorful</br> fun made </br>easy</h3>
<img src="beverages1.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Bath & Body</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li>Deodorants</li>
<li>Hand Soaps</li>
<li>Shaving</li>
<li>Shower</li>
<li>Skin Care</li>
<hr>
<li>Shop All Bath & Body</li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-116px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> Would you </br>Lather </h3>
<img src="bath&body1.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Health</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li>Ladies</li>
<li>Dental & Eye</li>
<li>Relief</li>
<li>Supplements</li>
<li>Adult Care</li>
<hr>
<li>Shop All Health</li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-171px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;">Picture of </br>Health </h3>
<img src="health.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Cleaning Supplies</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li>Surface Cleaners</li>
<li>Paper & Plastic</li>
<li>Laundry</li>
<li> Dish Soaps</li>
<li>Air & Fresheners</li>
<hr>
<li>Shop All Cleaning Supplies</li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-226px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> So Fresh </br>and Clean </h3>
<img src="cleaning.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Home & Office</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li>Stationery</li>
<li>Appliances & Tools</li>
<li>Tabletop & Storage</li>
<hr>
<li>Shop All Home & Office</li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-281px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> Lock in the </br>freshness </h3>
<img src="home.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Babies & Kids </span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li>Care & Cleaning</li>
<li>Diapers & Wipes</li>
<li>Nutrition</li>
<hr>
<li>Shop All Babies & Kids</li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-336px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> Baby got </br> Bath </h3>
<img src="baby.png" class="img-responsive"></a>
</ul>
</li>
<li>Lifestyle<span class="glyphicon glyphicon-chevron-right" style="margin-left:150px;color: rgba(255, 255, 255, .1);"></span></li>
<li>Pets <span class="glyphicon glyphicon-chevron-right" style="margin-left:150px;color:rgba(255, 255, 255, .1);"></span></li>
<li>Shop All Products <span class="glyphicon glyphicon-chevron-right" style="margin-left:100px;color:rgba(255, 255, 255, .1);"></span></li>
</ul>
</li>
<li>Best Sellers</li>
<li>What's New</li>
<li>On Sale</li>
<li>Samples</li>
</ul>
</div>
</nav>
</div>

You have to add position: static and top: 0 in CSS.
.dropdown-submenu {
position: static;
top: 0;
left: 100%;
}

Add this to your CSS:
.dropdown-submenu {
position: static;
}
This places your submenu dropdowns relative to your main dropdown menu.

Navigation roll-over needs to be same color when going down to sublinks

I have a project that requires me to add drop-down navigation. I am using GUMBY and have added the drop-downs.
The problem I am having is as you rollover each main navigation link- the sub-links drop-down but once you mouse over the sub-links - the main navigation color switches back. I've tried to stylize a mouse out event but that doesn't work.
How can I keep the main nav link the same color when you mouseover the sub-links?
http://ffresearch.com/who-we-are-dropdown.html
<style type="text/css">
#nav-orange li a:hover, #nav-orange li:hover a {
background-color: #fac55f !important;
color: white;
}
a.drkgreen:hover { background-color: #1f9390 !important; }
a.ltgreen:hover { background-color: #b3d88c !important; }
a.orange { background-color: #ffffff !important; }
a.orange:hover { background-color: #fac55f !important; }
a.ltblue { background-color: #ffffff !important; }
a.ltblue:hover { background-color: #26bfd0 !important; }
a.grey:hover { background-color: #8a949b !important; }
a.red:hover { background-color: #f16767 !important; }
a.red { background-color: #ffffff !important; }
</style>
<div class="navbar" gumby-fixed="top" id="nav1" style="background-image: url(img/white_banner_shadow4.png); background-position:bottom; background-repeat:repeat;">
<div class="row" >
<a class="toggle" gumby-trigger="#nav1 > .row > ul" href="#"><i class="icon-menu"></i></a>
<h1 class="four columns logo">
<a href="index.html">
<img src="img/FFR-logo3.png" gumby-retina />
</a>
</h1>
<ul class="eight columns" style="margin-top:30px;">
<li class="active">Our Difference</li>
<li style="background-color:#b3d88c; color:#FFF !important;" >Who We Are
<span class="not_mobile"><div class="dropdown">
<ul>
<li>Our Mission</li>
<li>Our Leadership</li>
</ul>
</div></span>
</li>
<li id="nav-orange">What We Do
<span class="not_mobile"><div class="dropdown">
<ul >
<li >Overview</li>
<li>Unique Research Services</li>
</ul>
</div></span>
</li>
<li>Our Capabilities
<span class="not_mobile"><div class="dropdown">
<ul>
<li>Experience</li>
<li>Qualitative</li>
<li>Quantitative</li>
<li>Support Services</li>
</ul>
</div></span>
</li>
<li>Connect</li>
<li>Tips and Tools
<span class="not_mobile"><div class="dropdown">
<ul>
<li>ProTalk™</li>
<li>Best Practice Tips</li>
</ul>
</div></span>
</li>
</ul>
</div>
</div>

in your CSS
change .navbar ul li > a:hover to .navbar ul li:hover > a
and a.orange:hover to li:hover > a.orange
and like so ..
Hope this will help you ..

Activating bootstrap dropdown menu on hover

I have some problem with activating bootstrap dropdown menu on hover - it only works on click. Here is the Bootply version: Bootply version
Any suggestions what I'm doing wrong?

Existing Code Solution
To use your existing code, add the following line to your hover listener:
$($(this).data('target')).collapse('show');
Working fork of your bootply: http://www.bootply.com/FRv5lVuiJk
Refactored Code Solution
That being said, there is a more effecient way of doing this using tabs. See http://www.bootply.com/TjqIiOM7Hi for a working example, and the code is below.
HTML
<div class="container">
<nav class="navbar navbar-default" role="navigation" id="topmenu">
<ul class="nav navbar-nav">
<li class="dropdown active">
One
</li>
<li class="dropdown">
Two
</li>
<li class="dropdown">
Three
</li>
</ul>
</nav>
<nav class="navbar navbar-default right tab-content" role="navigation" id="submenu">
<ul class="nav navbar-nav tab-pane active" id="one">
<li>One sub 1</li>
<li>One sub 2</li>
<li>One sub 3</li>
<li>One sub 4</li>
</ul>
<ul class="nav navbar-nav tab-pane" id="two">
<li>Two sub 1</li>
<li>Two sub 2</li>
<li>Two sub 3</li>
</ul>
<ul class="nav navbar-nav tab-pane" id="three">
<li>Three sub 1</li>
<li>Three sub 2</li>
</ul>
</nav>
</div>
Javascript
$('[data-toggle=tab]').hover(function (e) {
$(this).click();
});

You can do this. No JavaScript needed
HTML:
<div class="dropdown">
<button class="">
<a class="">Dropdown</a>
</button>
<div class="dropdown-content">
<a class="dropdown-item">Item 1</a>
<a class="dropdown-item">Item 2</a>
<a class="dropdown-item">Item 3</a>
</div>
</div>
you can obviously change the style to your preference but the code relating to the display is important.
CSS:
/* Dropdown Content (Hidden by Default) */
.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;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color:#6c757d;
}
Just slot in the menu in the position you want along with your bootstrap classes.