We Keep Coding

link ( a href above all divs)

Hi this is the scenario i have a sliding menu on right side of the website and the position of it is fixed. and there's a link "" that i want to float above it position absolute or relative with the z-index like this but even i add z-index 10000. position absolute or fixed its not showing up. outside the slider div.
Please check the image. check the green circle
NOTE: once the menu is open the #menu close is reviled
the css for it is and html honestly speaking im having a hard time for it thank you
#menu .close {
background-image: url("images/close.svg");
background-position: 4.85em 1em;
background-repeat: no-repeat;
border: 0;
cursor: pointer;
display: block;
height: 3em;
position: fixed;
right: 541px;
top: 0;
z-index: 50000;
display: block;
vertical-align: middle;
width: 7em;
}
Html
<div id="header" class="alt">
<nav id="nav">
<ul>
<li class="special">
<span> menu</span>
<div id="menu">
<div class="logo_menu">
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/logo.png">
</div>
<ul>
<li>Home</li>
<li>Company Values</li>
<li>Our services</li>
<li>Need Home health care now?</li>
<li>Meet the Team</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
Css
*/
#header {
-moz-transition: background-color 0.2s ease;
-webkit-transition: background-color 0.2s ease;
-ms-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
background: #2e3842;
height: 3em;
left: 112px;
line-height: 3em;
position: absolute;
top: -38px;
width: 100%;
z-index: 10000;
}
#header h1 {
-moz-transition: opacity 0.2s ease;
-webkit-transition: opacity 0.2s ease;
-ms-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
height: inherit;
left: 1.25em;
line-height: inherit;
position: absolute;
top: 0;
}
#header h1 a {
border: 0;
display: block;
height: inherit;
line-height: inherit;
}
#media screen and (max-width: 736px) {
#header h1 a {
font-size: 0.8em;
}
}
#header nav {
height: inherit;
line-height: inherit;
position: absolute;
right: -5px;
top: 38px;
}
#header nav > ul {
list-style: none;
margin: 0;
padding: 0;
white-space: nowrap;
}
#header nav > ul > li {
display: inline-block;
padding: 0;
}
#header nav > ul > li > a {
border: 0;
color: #000;
display: block;
font-size: 0.8em;
padding: 0 1.5em;
text-transform: uppercase;
padding-left: 0px !important;
}
#header nav > ul > li > a.menuToggle {
outline: 0;
position: relative;
}
#header nav > ul > li > a.menuToggle:before {
background-image: url("images/bars.svg");
background-position: right center;
background-repeat: no-repeat;
content: '';
display: inline-block;
height: 3.75em;
vertical-align: top;
width: 2em;
}
#media screen and (max-width: 736px) {
#header nav > ul > li > a.menuToggle {
padding: 0 1.5em;
}
#header nav > ul > li > a.menuToggle span {
display: none;
}
}
#media screen and (max-width: 736px) {
#header nav > ul > li > a {
padding: 0 0 0 1.5em;
}
}
#header nav > ul > li:first-child {
margin-left: 0;
}
#header.alt {
background: transparent;
}
#header.alt h1 {
-moz-pointer-events: none;
-webkit-pointer-events: none;
-ms-pointer-events: none;
pointer-events: none;
opacity: 0;
}
.logo_menu {
margin-bottom: 30px;
}
a.menuToggle {
text-decoration: none;
}
a.menuToggle span {
padding-left: 4px;
}

Anytime you want to put an element absolute on top of an element, you want to set the parent to position:relative and put the child element in the parent.
<div class="parent">
<a class="child">Child</a>
</div>
.parent {
position: relative;
z-index: 1;
}
.child {
position: absolute;
z-index: 2;
top: 0; //style to taste
left: 0; //style to taste
}

Having trouble keeping Drop Down Menu Centered when resizing browser

So, I'm having trouble with when I am running my page and resizing the browser / on mobile the drop down menu becomes uncentered and runs off the page. I think I have to fix my padding levels but I am not sure where and when I have, it has messed up more than what I was fixing.
Any help, helps!
[
$('.drop-down').click(function() {
$(this).hide();
});
$('.nav-main li').click(function() {
$('.drop-down').hide();
});
//drop down slide down
$('.nav-main li ul').hide().removeClass('.drop-down');
$('.nav-main li').hover(
function openDrop() {
$('ul', this).stop().slideDown(900);
}, function closeDrop() {
$('ul', this).stop().slideUp(1000);
});
.nav-main {
position: absolute;
top: 0;
height: 65px;
width: 100%;
text-align: center;
}
.nav-main ul {
position: relative;
margin: 0 auto;
padding: 0;
list-style: none;
font-size: 22px;
line-height: 100%;
font-family: 'Futura W01 Bold', sans-serif;
text-align: center;
text-transform: uppercase;
display: inline-block;
width: 100%;
}
.nav-top {
position: relative;
margin: 0;
padding: 0 66px 0 50px;
float: none;
display: inline-block;
list-style: none;
}
.nav-top:first-child {
padding-left: 0;
}
.nav-top:last-child {
background-image: none;
padding-right: 0;
}
.nav-top:last-child:after {
content: none;
}
.nav-top > a {
position: relative;
display: block;
margin: 0;
color: #6f6f6f;
text-decoration: none;
padding-top: 20px;
padding-bottom: 5px;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav-top a:hover,
.nav-top.active > a {
color: #454545;
border-bottom: 4px solid #00e9d9;
text-decoration: none;
}
.nav-top ul {
display: none;
position: absolute;
left: -8.75px;
width: 105%;
top: calc(100% - 1px);
border-bottom-left-radius: .3em;
border-bottom-right-radius: .3em;
}
.nav-top:hover ul {
position: absolute;
top: calc(100% - 1px);
left: -8.75px;
width: 105%;
}
.nav-top li {
float: center;
background-color: #e9e9e9;
padding-top: 16px;
padding-bottom: 10px;
text-align: inherit;
}
.nav-top li:last-child {
padding-bottom: 16px;
border-bottom-left-radius: .3em;
border-bottom-right-radius: .3em;
}
.nav-top li > a {
position: relative;
display: inline;
margin: 0;
color: #6f6f6f;
text-decoration: none;
padding-top: 20px;
padding-bottom: 1px;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav-top:after {
display: block;
position: absolute;
left: 100%;
top: -17px;
width: 22px;
z-index: 1;
transform: translateX(-50%);
height: 100%;
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav-main" role="navigation">
<ul>
<li class="nav-top">Welcome</li>
<li class="nav-top">About
<ul class="drop-down">
<li class="nav-drop">Services</li>
<li class="nav-drop">Clients</li>
<li class="nav-drop">Press</li>
<li class="nav-drop">Leadership</li>
<li class="nav-drop">Follow Us</li>
</ul>
</li>
<li class="nav-top">Contact</li>
</ul>
<span class="nav-arrow"></span>
</nav>
]3

You can a #media breakpoint to target a certain browser width in order to reduce the font-size for the menu for the now smaller screen size.
#media only screen and (max-width: 767px) {
.nav-main ul {
font-size: 18px;
}
}
See this fiddle (reduce the frame window width to see the changes)
Of course the font-size and browser window threshold width are up to you and your needs. And you may want to change more the the font-size... like paddings for example.

By using media queries you can fixed this problem, media query means you will define CSS according to the device screen size, you can learn more about media query from this.

While the other answers are correct in using a #media breakpoint I would also suggest using 'rem' units for sizes as opposed to "px". Working in relative units has several advantages

How can I hide and show submenu?

I am trying to create a jQuery sliding navigation and I stumble into some problem. I don't know how to slide/hide and display my submenu.
Here's the HTML:
<div class="content">
<div class="page-content">
</div>
<div class="sidebar-nav">
<header class="logo">
<span class="fa fa-bars"></span>
<span id="logo">NAV</span>
</header>
<div class="nav">
<ul id="nav" >
<li><i class="fa fa-home"></i><span>Home</span></li>
<li><i class="fa fa-anchor"></i><span>Profile</span><span class="fa fa-plus" style="float: right"></span>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</li>
<li><i class="fa fa-gears"></i><span>Contact</span></li>
</ul>
</div>
</div>
</div>
Please help!

There's an error in your JSFiddle concerning your toggle = !toggle. However, why not just use the $('#elementId').toggle()? It's JQuery, and it simplifies this code massively. See here for my JSFiddle, and below for my code.
HTML:
<nav class="sidebar-nav">
<header class="logo">
<span class="fa fa-bars"></span>
<span id="logo">NAV</span>
</header>
<ul id="nav" class="nav">
<li><i class="fa fa-home"></i>Home</li>
<li><i class="fa fa-user"></i>Profile<i class="expandNav fa fa-plus-square"></i>
<ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
<li>profile.1</li>
<li>profile.2</li>
<li>profile.3</li>
</ul>
<li><i class="fa fa-envelope"></i>About<i class="expandNav fa fa-plus-square"></i>
<ul class="nav collapse" id="submenu2" role="menu" aria-labelledby="btn-1">
<li>About.1</li>
<li>About.2</li>
<li>About.3</li>
</ul>
</li>
<li><i class="fa fa-history"></i>Blog</li>
<li><i class="fa fa-share-alt"></i>Deals<i class="expandNav fa fa-plus-square"></i>
<ul class="nav collapse" id="submenu3" role="menu" aria-labelledby="btn-1">
<li>Deals.1</li>
<li>Deals.2</li>
<li>Deals.3</li>
</ul>
</li>
</ul>
</nav>
CSS (I took a lot of this from the original Fiddle):
html,
body {
font-family: 'Lato', sans-serif;
height: 100%;
background: #ecf0f1;
}
a {
color: #008DE7;
font-style: italic;
font-weight: 700;
}
.expandNav {
float: right;
padding-top: 4px;
}
.content {
min-width: 1260px;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
margin: 0px auto;
}
.content.sidebar-collapsed {
padding-right: 65px;
transition: all 100ms linear;
transition-delay: 300ms;
}
.content.sidebar-collapsed-back {
padding-right: 280px;
transition: all 100ms linear;
}
.content.sidebar-collapsed .sidebar-nav {
width: 65px;
transition: all 100ms ease-in-out;
transition-delay: 300ms;
}
.content.sidebar-collapsed-back .sidebar-nav {
width: 280px;
transition: all 100ms ease-in-out;
}
.content.sidebar-collapsed .logo {
padding: 26px;
box-sizing: border-box;
transition: all 100ms ease-in-out;
transition-delay: 300ms;
}
.content.sidebar-collapsed-back .logo {
width: 100%;
padding: 21px;
height: 136px;
box-sizing: border-box;
transition: all 100ms ease-in-out;
}
.content.sidebar-collapsed #logo {
opacity: 0;
transition: all 200ms ease-in-out;
}
.content.sidebar-collapsed-back #logo {
opacity: 1;
transition: all 200ms ease-in-out;
transition-delay: 300ms;
}
.content.sidebar-collapsed #nav span {
opacity: 0;
transition: all 50ms linear;
}
.content.sidebar-collapsed-back #nav span {
opacity: 1;
transition: all 200ms linear;
}
.sidebar-nav {
position: fixed;
float: left;
width: 250px;
top: 0;
right: 0;
bottom: 0;
background-color: #e74c3c;
color: #aaabae;
font-family: "Lato";
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
}
#nav {
list-style: none;
margin: 0;
padding: 0;
margin-bottom: 20px;
}
#nav li {
position: relative;
margin: 0;
font-size: 15px;
border-bottom: 1px solid #fff;
padding: 0;
}
#nav li a {
font-style: normal;
font-weight: 400;
position: relative;
display: block;
padding: 16px 25px;
color: #fff;
white-space: nowrap;
z-index: 2;
text-decoration: none
}
#nav li a:hover {
color: #c0392b;
background-color: #ecf0f1;
}
#nav ul li {
background-color: #2b303a;
}
#nav li:first-child {
border-top: 1px solid #fff;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav .fa {
margin: 0px 17px 0px 0px;
}
.logo {
width: 100%;
padding: 21px;
margin-bottom: 20px;
box-sizing: border-box;
}
#logo {
color: #fff;
font-size: 30px;
font-style: normal;
}
.sidebar-icon {
position: relative;
float: right;
text-align: center;
line-height: 1;
font-size: 25px;
padding: 6px 8px;
color: #fff;
}
and JS (This was just to toggle the icons):
$('#nav a').click(function() {
$(this).find('i.expandNav').toggleClass('fa-plus-square fa-minus-square');
});

try the following
css:
.disp {
opacity: 1!important;
height:auto!important;
transition: height 100ms ease-in-out;
transition-delay: 300ms;
}
js:
$('.nav a').click(function(){
$(this).closest('li').find('ul').toggleClass('disp');
$(this).find('span.fa').toggleClass('fa-plus').toggleClass('fa-minus');
});
http://jsfiddle.net/2tz4usnL/3/

Here is a Working Fiddle
Add this Scripts
$('#nav a .fa.fa-plus').on('click',function(){
$(this).toggleClass('fa-plus').toggleClass('fa-minus'); //to toggle icons
$(this).closest('li').find('ul').toggleClass('active');
});
And this CSS
#nav li ul {
/*opacity: 0;*/ /* changed */
height: auto; /* changed */
display: none; /* added */
}
#nav li ul.active { /* added */
display:block;
}

jQuery slideToggle() not working on div with display:none

I'm creating a responsive menu for which I'm using slidetoggle. There is an a element I click to trigger a slideToggle on the .menu element. The html and css for that element look like this:
<nav id="site-navigation" class="main-navigation clearfix" role="navigation">
<i class="fa fa-bars"></i><i class="fa fa-times"></i>
<div class="menu">
<ul>
<li class="page_item page-item-9">Contact</li>
<li class="page_item page-item-5">Features</li>
<li class="page_item page-item-2">Over MonkeyApps</li>
<li class="page_item page-item-7">Prijzen</li>
</ul>
</div>
</nav>
All CSS associated with these elements:
.main-navigation {
margin: 20px 0;
padding: 0 25px;
}
.main-navigation a#responsive-menu {
color: #fff;
font-size: 32px;
float: right;
}
.main-navigation a#responsive-menu:hover,
.main-navigation a#responsive-menu:focus {
text-decoration: none;
}
.main-navigation a#responsive-menu i {
display: none;
}
.main-navigation a#responsive-menu i:first-child {
display: inline;
}
.main-navigation a#responsive-menu.active i:first-child {
display: none;
}
.main-navigation a#responsive-menu.active i {
display: inline;
}
.menu {
display: none;
position: absolute;
top: 80px;
left: 0;
width: 100%;
}
.main-navigation ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.main-navigation ul li {
display: block;
width: 100%;
height: 45px;
line-height: 45px;
text-align: center;
background: #0091ea;
}
.main-navigation ul li a {
display: inline-block;
font-family: 'Alright_bold';
font-size: 16px;
font-weight: normal;
color: #fff;
width: 100%;
height: 45px;
line-height: 45px;
text-align: center;
position: relative;
padding-bottom: 3px;
}
.main-navigation ul li a:hover {
text-decoration: none;
}
.main-navigation ul li a:before {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
transition: width 0s ease, background .5s ease;
}
.main-navigation ul li a:after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 3px;
width: 0;
background: #fff;
transition: width .5s ease;
}
.main-navigation ul li a:hover:before {
width: 100%;
background: #fff;
transition: width .5s ease;
}
.main-navigation ul li a:hover:after {
width: 100%;
background: transparent;
transition: all 0s ease;
}
As you see there is one wrapper for the menu and the button that triggers the mobile menu. The bit of jquery which includes slideToggle:
$('#responsive-menu').click(
function () {
$(".menu").slideToggle();
$("#responsive-menu").toggleClass("active");
}
);
The thing with this is that the slideToggle is in fact triggered and there is stuff happening. Also there are no errors whatsoever. The menu isn't being made visible though and I really can't figure out why, does anyone know how to solve this?
A JSFiddle for the problem:
JSFiddle

actually you are using jquery alpha
use this jquery:
http://code.jquery.com/jquery-1.9.1.js
$(document).ready(function(){
$('#responsive-menu').click(
function () {
$(".menu").slideToggle();
$("#responsive-menu").toggleClass("active");
}
);
});
.main-navigation {
margin: 20px 0;
padding: 0 25px;
}
.main-navigation a#responsive-menu {
color: #000;
font-size: 32px;
float: right;
}
.main-navigation a#responsive-menu:hover,
.main-navigation a#responsive-menu:focus {
text-decoration: none;
}
.main-navigation a#responsive-menu i {
display: none;
}
.main-navigation a#responsive-menu i:first-child {
display: inline;
}
.main-navigation a#responsive-menu.active i:first-child {
display: none;
}
.main-navigation a#responsive-menu.active i {
display: inline;
}
.menu {
/*display: none;*/
position: absolute;
top: 80px;
left: 0;
width: 100%;
}
.main-navigation ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.main-navigation ul li {
display: block;
width: 100%;
height: 45px;
line-height: 45px;
text-align: center;
background: #0091ea;
}
.main-navigation ul li a {
display: inline-block;
font-family: 'Alright_bold';
font-size: 16px;
font-weight: normal;
color: #000;
width: 100%;
height: 45px;
line-height: 45px;
text-align: center;
position: relative;
padding-bottom: 3px;
}
.main-navigation ul li a:hover {
text-decoration: none;
}
.main-navigation ul li a:before {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
transition: width 0s ease, background .5s ease;
}
.main-navigation ul li a:after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 3px;
width: 0;
background: #fff;
transition: width .5s ease;
}
.main-navigation ul li a:hover:before {
width: 100%;
background: #fff;
transition: width .5s ease;
}
.main-navigation ul li a:hover:after {
width: 100%;
background: transparent;
transition: all 0s ease;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<nav id="site-navigation" class="main-navigation clearfix" role="navigation">
<i class="fa fa-bars"></i><i class="fa fa-times"></i>
<div class="menu" style="display:none;">
<ul>
<li class="page_item page-item-9">Contact</li>
<li class="page_item page-item-5">Features</li>
<li class="page_item page-item-2">Over MonkeyApps</li>
<li class="page_item page-item-7">Prijzen</li>
</ul>
</div>
</nav>

Any absolute positioned element will get the left/top position from the body not within the block it's been contained. So if you want it to be contained in the parent element then parent should be relatively positioned and then if child is absolutely positioned then left/top position will be calculated within the parent container.
Try applying the z-index to the .menu:
.menu {
display: none;
position: absolute;
top: 80px;
left: 0;
width: 100%;
z-index:1; // number as needed
}
and if you want to contain it within the parent nav element then you can use position:relative; to nav element:
.main-navigation {
margin: 20px 0;
padding: 0 25px;
position:relative;
}
Updates:
You have used an alpha version of jquery 3.0 which is still in development i guess. you should use either 2.x or 1.x versions of jquery which is production ready and can be downloaded from jquery.

When you use javascript to change style, javascript puts the style inline, and remove the style inline, but the styles defined in CSS sheets are still there and active. So when it toggle, it removes the style inline, but there will still be display: none in the CSS. Hence not showing the menu.
Remove display: none; from the CSS and add it inline, so that it doesn't show up at page load :
fiddle
.menu {
/*display: none;*/
position: absolute;
top: 80px;
left: 0;
width: 100%;
}
and in HTML :
<div class="menu" style="display:none;">

I'm attempting to create a vertical menu with flyouts

I've spent all night attempting to create this. I finally got it to where it will display a flyout, but all of the dimensions are wrong, and I'm obviously not understanding the hierarchy of css here. My end goal is for it to look like this. (Vertical, color scheme, pretty icons) What I want it to look like. But I want it to act like this.
HTML:
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script><script type="text/javascript" src="js/menu.js"></script><script type="text/javascript">$(document).ready(function(){$(".menu").menu({speed: 400,type: "vertical",});});</script>
<body>
<div class="content">
<ul class="menu">
<li class="active"><a href="JavaScript:void(0)"><i class="icon-dashboard">
</i>Dashboard</a></li>
<li><i class="icon-servers"></i>Servers
<ul>
<li>View Virtual Servers</li>
<li>Add Virtual Servers</li>
</ul>
</li>
<li><i class"icon-user"></i>Users</li>
</ul>
</div>
</body>
CSS:
#import "./font-awesome.css";
#import url('http://fonts.googleapis.com/css?family=Source+Sans+Pro');
.menu {
position: relative;
float: left;
height: 100%;
top: 0;
left: 0;
z-index: 10;
margin: 0;
padding: 0;
font-family: "Source Sans Pro", Segoe UI, Arial;
list-style: none;
background: #303641;
box-shadow: 2px 0 18px rgba(0, 0, 0, 0.26);
}
.menu li {
display: inline;
position: relative
float: left;
height: 2.5em;
line-height: 2.5em;
width: 4em;
margin: 0;
padding: 0;
font-size: 12px;
}
.menu>li>a {
display: block;
padding: 20px 22px;
color: #aaabae;
text-align: center;
text-decoration: none;
text-transform: uppercase;
text-indent: -500em;
border-bottom: 1px solid rgba(170, 171, 174, 0.15);
-webkit-transition: color .2s linear, background .2s linear;
-moz-transition: color .2s linear, background .2s linear;
-o-transition: color .2s linear, background .2s linear;
transition: color .2s linear, background .2s linear
}
.menu li:hover>a, .menu li.active a {
background: #2b303a;
color: #fff
}
.menu li.right {
float: right
}
.menu ul, .menu ul li ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
z-index: 99999;
width: 4em;
background: #303641;
box-shadow: 0 1px 1px rgba(0,0,0,0.3)
}
.menu ul {
top: 60px;
left: 0
}
.menu ul li ul {
top: 0;
left: 100%
}
.menu ul li {
clear: both;
width: 4em;
border: 0;
font-size: 12px
}
.menu ul li a {
padding: 10px 20px;
width: 4em;
color: #dedede;
font-size: 13px;
text-decoration: none;
display: inline-block;
float: left;
clear: both;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-transition: color .2s linear, background .2s linear;
-moz-transition: color .2s linear, background .2s linear;
-o-transition: color .2s linear, background .2s linear;
transition: color .2s linear, background .2s linear
}
menu>li.showhide {
display: none;
width: 4em;
height: 2.5em;
cursor: pointer;
color: #dedede;
border-bottom: solid 1px rgba(0,0,0,0.1);
background: #303641;
}
menu>li.showhide span.title {
margin: 16px 0 0 25px;
float: left
}
.menu>li.showhide span.icon {
margin: 17px 20px;
float: right
}
.menu>li.showhide .icon em {
margin-bottom: 3px;
display: block;
width: 20px;
height: 2px;
background: #ccc
}
.menu.vertical {
width: 4em;
}
.menu.vertical li {
width: 4em;
}
.menu.vertical li a {
display: inline-block!important;
width: 4em;
padding: 18px 20px 16px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box
}
.menu.vertical ul li {
width: 4em;
}
.menu.vertical ul, .menu.vertical ul li ul {
width: 4em;
}
.menu.vertical ul {
top: 0;
left: 100%
}
.menu.vertical ul li ul {
top: 1px
}
JavaScript:
$.fn.menu=function(e){function r(){$(".menu").find("li").unbind();$(".menu").find("ul").hide(0);if(window.innerWidth<=768){o();s();if(n==true){a();n=false}}else{u();i();if(t.type=="horizontal"&&t.align=="right"&&n==false){a();n=true}}}function i(){$(".menu li").bind("mouseover",function(){$(this).children("ul").stop(true,true).fadeIn(t.speed)}).bind("mouseleave",function(){$(this).children("ul").stop(true,true).fadeOut(t.speed)})}function s(){$(".menu > li").bind("click",function(){if($(this).children("ul").css("display")=="none"){$(this).find("ul").slideDown(t.interval)}else{$(this).children("ul").slideUp(t.interval)}})}function o(){$(".menu > li:not(.showhide)").hide(0);$("-menu > li.showhide").show(0);$(".menu > li.showhide").bind("click",function(){if($(".menu > li").is(":hidden")){$(".menu > li").slideDown(300)}else{$(".menu > li:not(.showhide)").slideUp(300);$(".menu > li.showhide").show(0)}})}function u(){$(".menu > li").show(0);$(".menu > li.showhide").hide(0)}function a(){$(".menu > li").addClass("right");var e=$(".menu").width();var t=$(".menu").children("li");var n=0;$(".menu").children("li:not(.showhide)").detach();for(var r=t.length;r>=1;r--){$(".menu").append(t[r])}}var t={speed:300,type:"horizontal",align:"left"};$.extend(t,e);var n=false;if(t.type=="vertical"){$(".menu").addClass("vertical");if(t.align=="right"){$(".menu").addClass("right")}}$(".menu").prepend("<li class='showhide'><span class='title'>MENU</span><span class='icon'><em></em><em></em><em></em><em></em></span></li>");r();$(window).resize(function(){r()})}
Thank you in advance for any help you provide! I appreciate anything :)

A few things need to be reset.
Remove overflow: hidden from the ul.menu. Otherwise your flyouts will be... hidden. :)
Set the .menu>li to position: relative and then the sub uls to position: absolute offsetting however you need to.
Make sure you're targeting specific <a> elements with your initial css by using child selectors instead of decendant selectors. That is, use .menu > li > a vs .menu li a. The former will only target as that are children of the lis that are children of .menu. The latter will target all as that are descendant of all lis that are descendants of .menu which will include your flyout's <a>s.
This fiddle should get your started.