We Keep Coding

Jquery drop down menu on click - Hide menu when user clicks menu button, clicks outside of menu OR clicks on a new drop

I've been looking around here for an example drop down nav menu that does three things:
When the user CLICK on the menu drop it shows the drop down (this works)
When the user CLICKS outside of the nav area or anywhere else on the page is closes an open drops (this works too)
When a user CLICKS on another drop down if one is already open, it closes the previously open drop and opens the new drop menu. <-(I'm stuck here).
Currently if you click on one drop menu, then click on another, the first stays open. I want any other menus that are open to close if you click on another drop down. But i want to retain the behavior that when the user clicks outside of the menu anywhere in the document it closes too.
I've found several SO posts that solve some of this. However sometimes they nav bar only has 1 drop down as an example. Other times for some reason the solution causes other issues in my nav. So i decided to create a new post.
Please note that i'm learning JS and jquery now.
Here is my code:
$(document).ready(function() {
$('.dropdown').click(function(e) {
e.stopPropagation();
// hide all dropdown that may be visible -
// this works but it breaks the functionality of toggling open and closed
// when you click on the menu item
e.preventDefault();
// close when click outside
$(this).find('.dropdown-content').toggleClass('open')
});
// Close dropdown when u click outside of the nav ul
$(document).click(function(e) {
if (!e.target.closest("ul") && $(".dropdown-content").hasClass("open")) {
$(".dropdown-content").removeClass("open");
}
})
});
.nav__topbar {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 2em;
background: #fff;
}
.nav__links {
overflow: hidden;
display: flex;
align-items: center;
margin-left: auto!important;
a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
&:hover {
color: #ccc;
}
}
.icon {
display: none;
}
}
.nav__links .dropdown .dropdown-content {
position: absolute;
max-width: 25%;
}
.dropdown .dropbtn,
.nav__links a {
font-size: 1.5em!important;
color: #222;
}
/* Upon click the menu should turn into a vertical stacked menu with a soft drop shadow */
.nav__links.vertical {
position: absolute;
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 2em;
top: 50%;
left: 70%;
background-color: #fff;
z-index: 1;
border: 1px solid #f2f3f3;
border-radius: 4px;
background: #fff;
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.dropdown {
float: left;
overflow: hidden;
}
/* Codepen doesn't like when i nest styles */
.dropdown .dropbtn {
border: none;
outline: none;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown {
cursor: pointer;
display: block;
&:hover {
background-color: #444;
}
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
background-color: #fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
width: 100%;
transition: all 0.25s ease-in;
transform: translateY(-10px);
}
/* Style the links inside the dropdown codepen doesn't like my nesting */
.dropdown-content a {
float: none;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content li,
.nav__links li,
.nav__links li a {
list-style-type: none;
text-decoration: none;
}
.dropdown li {
padding: 20px
}
.dropdown .dropdown-content.open {
display: block;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav__topbar">
<ul class="nav__links">
<li class="dropdown" data-hover="title">
<button class="dropbtn">community <span class="downBtn">▼</span>
</button>
<ul class="dropdown-content">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
<li>Menu item 2</li>
<li class="dropdown" data-hover="title">
<button class="dropbtn">menu <span class="downBtn">▼</span>
</button>
<ul class="dropdown-content">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
<li class="dropdown" data-hover="title">
<button class="dropbtn">menu <span class="downBtn">▼</span>
</button>
<ul class="dropdown-content">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
</ul>
</nav>
And here [is a codepen](https://codepen.io/lwasser/pen/BaVKYNX as well with the same code in case you want to play with the code.
UPDATE: the code above works with the fixes provided in the accepted answer below! The code had another bug which was drop down links didn't work. but i was able to remove / fix that by removing:
e.stopPropagation();
e.preventDefault();
Many thanks for the folks who helped below!! And i'll try to fully update my codepen with the hamburger as well as soon as I can in case that helps people.

You are almost there!
Store in a var the clicked element.
Remove the open class name from all elements except the clicked one.
Toggle the open class of the clicked element.
$(document).ready(function () {
$(".dropdown").click(function (e) {
e.stopPropagation();
e.preventDefault();
// 1. Store in a var the clicked element
var current_dropdown = $(this).find(".dropdown-content");
$(".dropdown-content").each(function() {
var element = $(this);
// 2. Remove the `open` class name from all elements except the clicked one.
if (!element.is(current_dropdown)) {
$(this).removeClass("open");
}
});
// 3. Toggle the open class of the clicked element.
current_dropdown.toggleClass("open");
});
// Close dropdown when u click outside of the nav ul
$(document).click(function (e) {
if (!e.target.closest("ul") && $(".dropdown-content").hasClass("open")) {
$(".dropdown-content").removeClass("open");
}
});
});
I forked your codepen:
https://codepen.io/Valeriu-Ciuca/pen/KKezYME

While adding the open class, remove open class of the other dropdowns
$(this).siblings('.dropdown').find('.dropdown-content').removeClass('open');
Finding the siblings with dropdown class and removing open class of the corresponding element.
$(document).ready(function () {
$(".dropdown").click(function (e) {
e.stopPropagation();
e.preventDefault();
// close when click outside
$(this).find(".dropdown-content").toggleClass("open");
$(this).siblings('.dropdown').find('.dropdown-content').removeClass('open');
});
// Close dropdown when u click outside of the nav ul
$(document).click(function (e) {
if (!e.target.closest("ul") && $(".dropdown-content").hasClass("open")) {
$(".dropdown-content").removeClass("open");
}
});
});
.nav__topbar {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 2em;
background: #fff;
}
.nav__links {
overflow: hidden;
display: flex;
align-items: center;
margin-left: auto!important;
a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
&:hover {
color: #ccc;
}
}
.icon {
display: none;
}
}
.dropdown .dropbtn, .nav__links a {
font-size: 1.5em!important;
color: #222;
}
/* Upon click the menu should turn into a vertical stacked menu with a soft drop shadow */
.nav__links.vertical {
position: absolute;
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 2em;
top: 50%;
left: 70%;
background-color: #fff;
z-index: 1;
border: 1px solid #f2f3f3;
border-radius: 4px;
background: #fff;
-webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
.dropdown {
float: left;
overflow: hidden;
}
/* Codepen doesn't like when i nest styles */
.dropdown .dropbtn {
border: none;
outline: none;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown {
cursor: pointer;
display: block;
&:hover {
background-color: #444;
}
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
background-color: #fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
width: 100%;
transition: all 0.25s ease-in;
transform: translateY(-10px);
}
/* Style the links inside the dropdown codepen doesn't like my nesting */
.dropdown-content a {
float: none;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content li, .nav__links li, .nav__links li a {
list-style-type: none;
text-decoration: none;
}
.dropdown li {
padding: 20px
}
.dropdown .dropdown-content.open {
display: block;
padding: 0;
}
.nav__links .dropdown .dropdown-content {
position: absolute;
max-width: 25%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><html>
<head>
</head>
<body>
<nav class="nav__topbar">
<ul class="nav__links">
<li class="dropdown" data-hover="title">
<button class="dropbtn">community <span class="downBtn">▼</span>
</button>
<ul class="dropdown-content">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
<li>Menu item 2</li>
<li class="dropdown" data-hover="title">
<button class="dropbtn">menu <span class="downBtn">▼</span>
</button>
<ul class="dropdown-content">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
<li class="dropdown" data-hover="title">
<button class="dropbtn">menu <span class="downBtn">▼</span>
</button>
<ul class="dropdown-content">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>

Is it possible to create a drop down with multiple columns (like mega menu) using html css and jquery without using any plugins?

I have to create a drop down with two columns just like the image It should be like when i click on the drop down menu it should display like this so far i am not successful!. This is the sample code i am working with.. if i execute this code it is no where what i am expecting and also i am new to coding.
$(document).ready(function() {
// NAV TOGGLE ONCLICK WITH SLIDE
$(".clickSlide ul").hide();
$(".clickSlide").click(function() {
$(this).children("ul").stop(true, true).slideToggle("fast"),
$(this).toggleClass("dropdown-active");
});
// NAV TOGGLE ONCLICK WITH FADE
$(".clickFade ul").hide();
$(".clickFade").click(function() {
$(this).children("ul").stop(true, true).fadeToggle("fast"),
$(this).toggleClass("dropdown-active");
});
// NAV TOGGLE ONHOVER WITH SLIDE
$(".hoverSlide ul").hide();
$(".hoverSlide").hover(function() {
$(this).children("ul").stop(true, true).slideToggle("fast"),
$(this).toggleClass("dropdown-active");
});
// NAV TOGGLE ONHOVER WITH FADE
$(".hoverFade ul").hide();
$(".hoverFade").hover(function() {
$(this).children("ul").stop(true, true).fadeToggle("fast"),
$(this).toggleClass("dropdown-active");
});
});
/**/
#navbar {
width: 100%;
padding: 10 10 10 10;
}
#dropdown1 {
width: 960px;
margin: 0 auto;
padding: 0;
height: 1em;
font-weight: bold;
}
#dropdown1 li {
list-style: none;
float: left;
}
#dropdown1 li a {
padding: 0px 0px 0px 5px;
text-decoration: none;
}
#dropdown1 li ul {
display: none;
background-color: #fff;
}
#dropdown1 li:hover ul,
#navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#dropdown1 li:hover li,
#navbar li.hover li {
float: left;
}
#dropdown1 li:hover li a,
#navbar li.hover li a {
background-color: #fff;
color: #000;
}
.topnav a {
color: #000;
text-decoration: none;
}
.topnav a:hover {
border-bottom: 1px solid gold;
}
.column {
display: inline-block;
list-style-type: none;
float: left;
margin: 5px 0 0 0;
padding: 0 5px 0 0;
width: 500px !important;
}
.column li {
float: left;
display: inline;
}
.column a {
color: #999;
text-decoration: none;
font-size: .7em;
}
.column a:hover {
border-bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<ul id=dropdown1>
<li class="topnav">
<div class="column">
Services <span>▼</span>
<ul>
<li>Web hosting</li>
<li>Web builder</li>
<li>Themes</li>
</ul>
</div>
<div class="column">
<ul>
<li>Web hosting</li>
<li>Web builder</li>
<li>Themes</li>
</ul>
</div>
</ul>
</div>

if i understood properly,
This jsfiddle maybe helpful
looks like u use two div but have same class name, then with your css only set "column" .
so the two div will display in same position, that's why u have two div but only display one.
<div class="navbar">
<ul id=dropdown1>
<li class="topnav">
<div class="column">
Services <span>▼</span>
<ul>
<li>Web hosting</li>
<li>Web builder</li>
<li>Themes</li>
</ul>
</div>
<div class="column2">
<ul>
<li>Web hosting</li>
<li>Web builder</li>
<li>Themes</li>
</ul>
</div>
</ul>
then you should set column2's css
UPDATE:
this fiddle
look this fiddle above
i change the li and set
.column a:after{
content:"\a";
white-space: pre;
}
\a means line break, character U+000A, and white-space: pre tells browsers to treat it as a line break in rendering.
found answer here Line break (like <br>) using only css

I have developed drop-down as per your image, without using any plugin.
I am using:
HTML
CSS
Explaination:
I am using table tag to design multiple columns.
<table>
<tr>
<td></td>// for left-col links
<td></td>// for right-col links
</tr>
</table>
Then inside <td> tag I am using <ul><li></li></ul>tag. Inside <li> you can have multiple links.
Similarly I did for right-side column.
Full Code
CSS code
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.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 {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
.link-format {
list-style-type:none;
width:100px
}
</style>
HTML code
<body>
<h2>Dropdown Menu with multiple columns</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<table>
<tr>
<td>
<ul class="link-format" style="border-right:1px gray dashed">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</td>
<td>
<ul class="link-format">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
Working JsFiddle: https://fiddle.jshell.net/mayankBisht/cvsrqn3r/1/
Hope this helps.
Please reach out to me for more information/help.
Thanks.

How to add a header sub-menu using jQuery on click?

In my page header I have a list of 6 categories and I'd like to add a sub menu for each category, but display it only when category is clicked. (I'd like to use only one handler in my script.js file, not add one for each category in particular. - less code)
Here is my HTML for the list in header:
<ul id="menu">
<li id="menu_item1" class="menu_item">About
<div id="sub-menu1" class=“sub-menu”></div>
</li>
<li id="menu_item2" class="menu_item">Services
<div id="sub-menu2" class=“sub-menu”></div>
</li>
<li id="menu_item3" class="menu_item">Portfolio
<div id="sub-menu3" class=“sub-menu”></div>
</li>
<li id="menu_item4" class="menu_item">Blog
<div id="sub-menu4" class=“sub-menu”></div>
</li>
<li id="menu_item5" class="menu_item">Pictures
<div id="sub-menu5" class=“sub-menu”></div>
</li>
<li id="menu_item6" class="menu_item">Contacts
<div id="sub-menu6" class=“sub-menu”></div>
</li>
</ul>
This is the SCSS:
#menu {
position: absolute;
right: 25px;
top: 25px;
.menu_item {
position:relative;
font-family: $OpenSansSemibold;
font-size: 14px;
color: #fff;
text-transform: uppercase;
list-style-type: none;
display: inline-block;
padding: 8px 16px;
div.sub-menu {
position:absolute;
top:40px;
left: 0;
width: 200px;
height: 116px;
border: 1px solid green;
background-image: url(../img/popupmenu_03.png);
display: none;
}
&:hover{
background: #62a29e;
border-radius: 5px;
border-bottom: 5px solid #528b86;
cursor: pointer;
}
}
}
And here is what I tried so far, but it doesn't work:
$( ".menu_item" ).each(function() {
$(this).children().find(".sub-menu").toggle();
});
Any help would be much appreciated, thank you!

Just remove the .children() and it should work. .children() accesses direct children already, while .find() will traverse down the DOM tree from that element. So in your code, you were looking for any child (grandchild, etc) of direct children of .menu_item that was clicked. .sub-menu wasn't a child of direct children of .menu_item, but was rather already that element ;) I am using the .find() method here because it'll still work, even if your DOM changes. If you won't change anything in regards to your DOM structure of the menu, you are safe to use $(this).children().toggle();
var $subMenus = $(".menu_item").find(".sub-menu");
$(".menu_item").on("click", function() {
$subMenus.addClass("hidden");
$(this).find(".sub-menu").removeClass("hidden");
});
SCSS:
#menu {
.menu_item {
div.sub-menu {
....
&.hidden {
display: none;
}
}
}
}

Please try this:
jQuery( ".menu_item" ).click(function(e) {
jQuery(this).closest('#menu').find('.sub-menu').filter(':visible').hide(); // hides other open sub-menus
jQuery(this).find(".sub-menu").toggle(); // opens the clicked item's sub-menu
});
#menu {
position: absolute;
right: 25px;
top: 25px;
}
#menu .menu_item {
position: relative;
font-family: 'OpenSansSemibold';
font-size: 14px;
color: #333; /*fff; changed just for display */
text-transform: uppercase;
list-style-type: none;
display: inline-block;
padding: 8px 16px;
}
#menu .menu_item div.sub-menu {
position: absolute;
top: 40px;
left: 0;
width: 200px;
height: 116px;
border: 1px solid green;
background-image: url(../img/popupmenu_03.png);
display: none;
}
#menu .menu_item:hover {
background: #62a29e;
border-radius: 5px;
border-bottom: 5px solid #528b86;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="menu">
<li id="menu_item1" class="menu_item">About
<div id="sub-menu1" class="sub-menu"></div>
</li>
<li id="menu_item2" class="menu_item">Services
<div id="sub-menu2" class="sub-menu"></div>
</li>
<li id="menu_item3" class="menu_item">Portfolio
<div id="sub-menu3" class="sub-menu"></div>
</li>
<li id="menu_item4" class="menu_item">Blog
<div id="sub-menu4" class="sub-menu"></div>
</li>
<li id="menu_item5" class="menu_item">Pictures
<div id="sub-menu5" class="sub-menu"></div>
</li>
<li id="menu_item6" class="menu_item">Contacts
<div id="sub-menu6" class="sub-menu"></div>
</li>
</ul>

create a toggle menu in form of vertical list

I am trying to create a toggle menu, i have a menu that expands when i click on it and closes when i click on it again.
HTML code for it is
<label for="menu-toggle"><img src="icons/navicon.png"></label>
<input type="checkbox" id="menu-toggle"/>
<ul id="menu">
<li>First link</li>
<li>Second link</li>
<li>Third link</li>
</ul>
css is
<style>
label
{
cursor: pointer;
}
#menu-toggle
{
display: none; /* hide the checkbox */
}
#menu
{
display: none;
}
#menu-toggle:checked + #menu
{
display: block;
}
</style>
the toggle looks like this
when i click on the 3 lines image it looks like this
I want that when i click on the 3 lines image, the menu should get displayed in a vertical list, within a block with white background . something like this
can anyone tell me how i can do so

the images are not visible here. but what you can do is css for background color and width tag for a block.
something like
#menu
{
display: none;
width: 30%;
background-color:green;

Hey I just did some adjustments to your given code, and hope the output is close to the one in your given picture.
<style>
label
{
cursor: pointer;
}
a {
text-decoration: none;
color: #9A9494;
}
li {
border-bottom:#ccc solid 1px; /* This is the divider line in between the list items */
}
#menu-toggle
{
display: none; /* hide the checkbox */
}
#menu
{
display: none;
}
#menu-toggle:checked + #menu
{
display: block;
}
.xyz{
padding-bottom: 10px;
font-size: 30px;
background-color: #fff;
}
.container{
background-color: #ccc;
width:15%;
border-radius: 10px;
}
</style>
<!DOCTYPE html>
<html>
<head>
<title>DropDown</title>
</head>
<body>
<label for="menu-toggle"><img src="icons/navicon.png"></label>
<div class="container">
<input type="checkbox" id="menu-toggle"/>
<ul id="menu" style="list-style: none; padding:15px; border-radius: 15px;" >
<li class="xyz" ><a href="#" >First link</a></li>
<li class="xyz">Second link</li>
<li class="xyz">Third link</li>
</ul>
</div>
</body>
</html>
I combined stylesheet with the html... Nice helping you.. :)

Update following CSS:
#menu {
display: none;
list-style-type: none;
border-radius: 5px;
background-color: lightgray;
padding-left: 5px;
}
#menu-toggle:checked + #menu {
display: block;
}
li a {
color: #000;
text-decoration: none;
}
#menu li {
padding: 10px;
border-bottom: 1px solid #000;
margin-left: 5px;
margin-right: 5px;
}
DEMO

Submenu position relative to Mainmenu

I have this menu that is active on the first item of the main menu (top):
The problem I have is that when the user click on the middle, fourth or last main menu item, the submenu now looks like this (getting out of everything):
Also, the main menu will grow up by the client, so there will be sixth, seventh, etc... so I can´t just control with a class the items that are right now...
Any ideas on how to come to a css / jquery solution about this? trying to follow the first image that is based on the design.
This is my markup:
<ul id="mainmenu" class="clearfix">
<li class="active">
<a class="arrowdown" href="javascript:void(0)">ANSIEDAD</a>
<ul class="sublist">
<li>
Política
</li>
<li>
Economía
</li>
<li>
Sociedad
</li>
<li class="active">
Medios
</li>
<li>
Inmobiliario
</li>
</ul>
</li>
<li>
PRETENSIÓN
</li>
<li>
HEDONISMO
</li>
<li>
MATERIALISMO
</li>
<li>
ARROGANCIA
</li>
<li id="menu_search">
</li>
</ul>
and the CSS:
ul#mainmenu{
font-family: Georgia, Times, "Times New Roman", serif;
width: 754px;
margin: 0 auto;
li{
float: left;
list-style: none;
background: #999999;
margin-right: 4px;
.round_corners();
width: 140px;
text-align: center;
padding: 3px 0px;
position: relative;
a{
text-decoration: none;
color: #ffffff;
text-transform: uppercase;
font-size: 14px;
&.arrowdown{
padding-bottom: 10px;
background: url('../img/sprites.png') no-repeat center -169px;
}
}
&#menu_search{
background: url('../img/sprites.png') #000 2px 2px;
width: 34px;
height: 28px;
padding: 0;
margin-right: 0;
a{
display: inline-block;
width: 100%;
height: 100%;
}
}
&.active{
background: #000000;
}
&:hover{
background: #000000;
color: #ffffff;
}
ul.sublist{
position: absolute;
width: 560px;
top: 39px;
left: 40px;
li{
float: left;
margin-right: 5px;
margin-bottom: 5px;
width: auto;
padding: 1px 9px;
background: #666666;
a{
text-transform: none;
}
&.active{
background: #000000;
}
&:hover{
background: #000000;
color: #ffffff;
}
}
}
}
}

Try giving the main menu a max-width. In this case I'd assume you want its maximum width to be 100%.
#mainmenu {
max-width: 100%;
}
This will not allow the main menu to exceed the page's width. You may encounter new problems with this, though.

Using max-width will solve your problem. Here's an example of how you can use max-width to keep the sub-menu in check.
Instead of breaking the sub-menu into two lines, you could probably try to shift the anchor point of the sub-menu to a more centralized location. Just my 2 cents.