Develop Reference

Drop Down Menu disappears when you move your mouse down to click

I am using Dreamweaver CS6 to help an organization set up their website. To save time on the menu bar, I used one at Menu Maker. It was a wee bit wider than I wanted with my menu buttons, but I went in and manually reduced the padding so that they all fit on the menu bar, as well as increasing the font. The drop down menus worked great at the site preview, but when I inserted all the html code where I wanted the bar, copied the script.js and the styles.css it into the files folder, the drop down menus disappear when you move your mouse cursor down to select one.
After having difficulty, I submitted a support ticket. I then did some searches and saw complaints by other users that there is no support, no contact.
I have tried to ascertain where the coding issue is, that is causing the drop down menu to disappear, am now going blind in code view. ;( I could really use and would appreciate some advice.
HTML
<div id="cssmenu">
<ul>
<li class="active"><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i>
Home</a></li>
<li class="has-sub"><a href="about.htm"><i class="fa fa-fw fa-bars"></i>
About Us</a>
<ul>
<li>Contact Us</li>
<li>Organization</li>
</ul>
</li>
<li class="has-sub">Our Wild Bison Mission
<ul>
<li>Rationale</li>
<li>Montana Plans for Wild Bison</li>
<li>Wood Bison Example</li>
<li>Supporters</li>
<li>Polls</li>
<li>FWP Documents</li>
<li>Scientist's Letter of Support</li>
</ul>
</li>
<li class="has-sub">Why Wildness?
<ul>
<li>Biological Definitions</li>
<li>Legal Definitions</li>
</ul>
</li>
<li class="has-sub">Legal Issues
<ul>
<li>Wild Bison and the Law</li>
</ul>
</li>
<li class="has-sub">CMR/APR Bison Habitat
<ul>
<li>CMR</li>
<li>APR</li>
</ul>
</li>
<li>News</li>
<li>Contribute</li>
</ul>
</div>
Java
(function($){
$(document).ready(function(){
$('#cssmenu').prepend('<div id="menu-button">Menu</div>');
$('#cssmenu #menu-button').on('click', function(){
var menu = $(this).next('ul');
if (menu.hasClass('open')) {
menu.removeClass('open');
} else {
menu.addClass('open');
}
});
});
})(jQuery);
CSS
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button ,
#cssmenu{
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu > ul:after ,
#cssmenu:after{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
z-index: 100;
width: 1102px;
font-family: 'Open Sans', Helvetica, sans-serif;
background: #d5d69e;
background: -moz-linear-gradient(top, #dedfb4 0%, #c9ca81 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dedfb4), color-stop(100%, #c9ca81));
background: -webkit-linear-gradient(top, #dedfb4 0%, #c9ca81 100%);
background: -o-linear-gradient(top, #dedfb4 0%, #c9ca81 100%);
background: -ms-linear-gradient(top, #dedfb4 0%, #c9ca81 100%);
background: linear-gradient(to bottom, #dedfb4 0%, #c9ca81 100%);
}
#cssmenu > ul {
background: url('images/bg.png');
box-shadow: inset 0px -3px 0px rgba(0, 0, 0, 0.05);
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li {
float: left;
display: inline-block;
}
#cssmenu.align-center > ul {
float: none;
text-align: center;
font-size: 0;
}
#cssmenu.align-center > ul > li {
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu > ul > li > a {
border-right: 1px solid rgba(80, 80, 80, 0.12);
text-decoration: none;
font-size: 11px;
font-weight: 700;
color: #515223;
text-transform: uppercase;
letter-spacing: 1px;
padding-top: 14px;
padding-right: 10px;
padding-bottom: 19px;
padding-left: 10px;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a {
color: #ffffff;
background: #d0d193;
background: rgba(0, 0, 0, 0.1);
}
#cssmenu > ul > li.has-sub > a {
padding-right: 40px;
}
#cssmenu > ul > li.has-sub > a::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 6px solid transparent;
border-top-color: #515223;
right: 17px;
top: 20.5px;
}
#cssmenu > ul > li.has-sub.active > a::after,
#cssmenu > ul > li.has-sub:hover > a {
border-top-color: #ffffff;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
top: 60px;
z-index: 9999;
padding-top: 6px;
font-size: 13px;
opacity: 0;
-webkit-transition: top 0.2s ease, opacity 0.2s ease-in;
-moz-transition: top 0.2s ease, opacity 0.2s ease-in;
-ms-transition: top 0.2s ease, opacity 0.2s ease-in;
-o-transition: top 0.2s ease, opacity 0.2s ease-in;
transition: top 0.2s ease, opacity 0.2s ease-in;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu > ul > li > ul::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
border-bottom-color: #ffffff;
top: -4px;
left: 20px;
}
#cssmenu.align-right > ul > li > ul::after {
left: auto;
right: 20px;
}
#cssmenu ul ul ul::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
border-right-color: #ffffff;
top: 11px;
left: -4px;
}
#cssmenu.align-right ul ul ul::after {
border-right-color: transparent;
border-left-color: #ffffff;
left: auto;
right: -4px;
}
#cssmenu > ul > li > ul {
top: 120px;
}
#cssmenu > ul > li:hover > ul {
top: 49px;
left: 0;
opacity: 1;
}
#cssmenu.align-right > ul > li:hover > ul {
left: auto;
right: 0;
}
#cssmenu ul ul ul {
padding-top: 0;
padding-left: 6px;
}
#cssmenu.align-right ul ul ul {
padding-right: 6px;
}
#cssmenu ul ul > li:hover > ul {
left: 180px;
top: 0;
opacity: 1;
}
#cssmenu.align-right ul ul > li:hover > ul {
left: auto;
right: 100%;
opacity: 1;
}
#cssmenu ul ul li a {
text-decoration: none;
font-weight: 400;
padding: 11px 25px;
width: 180px;
color: #777777;
background: #ffffff;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.1), -1px 1px 1px rgba(0, 0, 0, 0.1);
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
color: #333333;
}
#cssmenu ul ul li:first-child > a {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
#cssmenu ul ul li:last-child > a {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
#cssmenu > ul > li > ul::after {
position: absolute;
display: block;
}
#cssmenu ul ul li.has-sub > a::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 4px solid transparent;
border-left-color: #777777;
right: 17px;
top: 14px;
}
#cssmenu.align-right ul ul li.has-sub > a::after {
border-left-color: transparent;
border-right-color: #777777;
right: auto;
left: 17px;
}
#cssmenu ul ul li.has-sub.active > a::after,
#cssmenu ul ul li.has-sub:hover > a::after {
border-left-color: #333333;
}
#cssmenu.align-right ul ul li.has-sub.active > a::after,
#cssmenu.align-right ul ul li.has-sub:hover > a::after {
border-right-color: #333333;
border-left-color: transparent;
}
#media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
background: #d5d69e;
}
#cssmenu > ul {
display: none;
}
#cssmenu > ul.open {
display: block;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
#cssmenu.align-right > ul {
float: none;
}
#cssmenu.align-center > ul {
text-align: left;
}
#cssmenu > ul > li,
#cssmenu.align-right > ul > li {
float: none;
display: block;
}
#cssmenu > ul > li > a {
padding: 18px 25px 18px 25px;
border-right: 0;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
background: rgba(0, 0, 0, 0.1);
}
#cssmenu #menu-button {
display: block;
text-decoration: none;
font-size: 13px;
font-weight: 700;
color: #515223;
padding: 18px 25px 18px 25px;
text-transform: uppercase;
letter-spacing: 1px;
background: url('images/bg.png');
cursor: pointer;
}
#cssmenu ul ul,
#cssmenu ul li:hover > ul,
#cssmenu > ul > li > ul,
#cssmenu ul ul ul,
#cssmenu ul ul li:hover > ul,
#cssmenu.align-right ul ul,
#cssmenu.align-right ul li:hover > ul,
#cssmenu.align-right > ul > li > ul,
#cssmenu.align-right ul ul ul,
#cssmenu.align-right ul ul li:hover > ul {
left: 0;
right: auto;
top: auto;
opacity: 1;
width: 100%;
padding: 0;
position: relative;
text-align: left;
}
#cssmenu ul ul li {
width: 100%;
}
#cssmenu ul ul li a {
width: 100%;
box-shadow: none;
padding-left: 35px;
}
#cssmenu ul ul ul li a {
padding-left: 45px;
}
#cssmenu ul ul li:first-child > a,
#cssmenu ul ul li:last-child > a {
border-radius: 0;
}
#cssmenu #menu-button::after {
display: block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #515223;
border-bottom: 2px solid #515223;
right: 25px;
top: 18px;
}
#cssmenu #menu-button::before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #515223;
right: 25px;
top: 28px;
}
#cssmenu > ul > li.has-sub > a::after,
#cssmenu ul ul li.has-sub > a::after {
display: none;
}
}

As pointed out, the gap between your menu and the submenu is causing the menu button to lose it's hover state when the mouse moves towards the submenu.
The easiest solution would be to adjust the top property of the submenu to remove the gap. Try adding this to the very bottom of your styles.css file:
#cssmenu > ul > li.has-sub:hover > ul {
top: 37px;
}
Edit:
A better solution would be to use hover intent to delay the closing of the submenu so that the user has enough time to move the pointer to it's intended location

Make Submenu of a Responsive Nav show

so I'm trying to make my navigation submenu dropdown on hover while in mobile nav mode (smaller than 900px).
How can I get my submenu items to show on hover while in mobile navigation mode?
Many thanks.
Edit:
To clarify, just for the browser window size on Desktop size for the window that screen, not actual tablet functionality hover.
$(document).ready(function(){
$("#nav-mobile").html($("#nav").html());
$("#nav-trigger span").click(function(){
if ($("#nav-mobile ul").hasClass("expanded")) {
$("#nav-mobile ul.expanded").removeClass("expanded").slideUp(250);
$(this).removeClass("open");
} else {
$("#nav-mobile ul").addClass("expanded").slideDown(250);
$(this).addClass("open");
}
});
});
/* RESPONSIVE */
#nav-trigger {
display: none;
text-align: center;
}
#nav-trigger span {
display: inline-block;
padding: 10px 0 10px 0;
background-color: #333;
color: #FFF;
cursor: pointer;
text-transform: uppercase;
width: 100%;
}
/* Mobile Nav Triangle */
#nav-trigger span:after {
display: inline-block;
margin-left: 10px;
width: 20px;
height: 10px;
content: "";
border-left: solid 10px transparent;
border-top: solid 10px #FFF;
border-right: solid 10px transparent;
}
/* Mobile Nav Triangle */
#nav-trigger span.open:after {
border-left: solid 10px transparent;
border-top: none;
border-bottom: solid 10px #FFF;
border-right: solid 10px transparent;
}
#nav-trigger span:hover {
background-color: #444;
}
/*--------------------- NAV MOBILE ------------------*/
#nav-mobile {
display: none;
position: relative;
margin-bottom: 30px;
}
#nav-mobile ul {
display: none;
list-style-type: none;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #333;
}
#nav-mobile li {
display: block;
margin: 0 2px;
border-top: solid 1px #CCC;
}
#nav-mobile li:last-child {
border-top: solid 1px #CCC;
}
#nav-mobile a {
display: block;
color: white;
padding: 10px 30px;
text-transform: uppercase;
}
#nav-mobile a:hover {
background-color: #444;
letter-spacing: 2px;
transition: all 0.3s ease;
}
/* RESPONSIVE */
#nav ul ul {
background: #333;
display: none;
max-width: 180px;
position: absolute;
}
/* Dropdown Menu */
#nav ul ul li {
display: block;
font-size: 14px;
}
#nav {
background: #222;
border-top: 1px solid #444;
height: 50px;
letter-spacing: 1px;
margin: 0 auto;
position: relative;
text-align: center;
text-transform: uppercase;
width: 100%;
z-index: 1000; /* To overlay content */
}
#nav ul {
font-size: 0; /* Fixes colour hover to full button width */
}
#nav li {
border-right: 1px solid #3f3f3f; /* Nav button divider */
height: auto;
width: 160px; /* Nav button size */
}
/* Left Divider of Home Button */
.home {
border-left: 1px solid #3f3f3f;
}
#nav ul li {
display: inline-block;
font-size: 16px;
}
/* Hover Effect */
#nav ul li:hover {
background: #333;
opacity: 0.9;
transition: all 0.3s ease;
}
/* Removes Link Visited Colour */
#nav ul li a, visted {
color: #fafafa;
display: block;
padding: 15px;
text-decoration: none;
}
/* Hover Effect */
#nav ul li a:hover {
color: #939393;
text-decoration: none;
transition: color 0.3s ease;
}
#nav ul li:hover ul {
display: block;
}
/* Dropdown Menu */
#nav ul ul {
background: #333;
display: none;
max-width: 180px; /* Dropdown menu bg fill */
position: absolute;
}
/* Dropdown Menu */
#nav ul ul li {
display: block;
font-size: 14px;
}
/* Dropdown Menu */
#nav ul ul li a:visited {
color: #fafafa;
}
/* Dropdown Menu */
#nav ul ul li a:hover {
background: #333;
color: #939393;
padding-right: 1px; /* Slide right effect */
transition: all 0.3s ease;
}
/*--------------------------------------------
MEDIA QUERIES
-------------------------------------------*/
#media all and (max-width: 900px) /* Original 900 */ {
#nav-trigger {
display: block;
}
#nav {
display: none;
}
#nav-mobile {
display: block;
}
#nav ul ul li:hover ul {
display: block;
}
#nav ul ul {
background: #333;
display: none;
max-width: 180px; /* Dropdown menu bg fill */
position: absolute;
}
#nav ul ul li {
display: block;
}
/* Dropdown Menu */
#nav ul li a:hover ul {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Start of Nav -->
<div id="nav-trigger">
<span>MENU</span>
</div>
<div id="nav">
<ul>
<li>Link</li>
<li>
Link
<ul class="sub">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li>
Link
<ul class="sub">
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li>
Link
<ul class="sub">
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
<div id="nav-mobile"></div>
<!-- End of Nav -->

Based on your code as it is now this would display the menus you have marked with .sub when their parent list item is hovered over.
#media all and (max-width: 900px) /* Original 900 */ {
#nav > ul > li:hover > ul {
display:block;
}
}
or
#media all and (max-width: 900px) /* Original 900 */ {
#nav > ul > li:hover .sub {
display:block;
}
}

so I'm trying to make my navigation submenu dropdown on hover while in mobile nav mode (smaller than 900px).
When you mention Mobile Nav and smaller than 900px, I assume you are talking about tablet and mobile devices. Hover for those would make no sense(no cursor in those devices).
For larger devices(Laptops/Desktops) .hover() would come to your rescue.
Jquery .hover

Want to keep the font color of menu black on mouseover submenu

I am using superfish menu and I want to keep the color of parent menu black when moving the mouse over the sub-menu. Currently when i move my mouse over the submenu the parent menu color becomes white same as the background. However i want the font color to be black instead of white. How can i achieve it. Please help me. Thanks in advance.
here is the my html code:
<div id="mainmenu">
<ul class="sf-menu">
<li><span>Home</span></li>
<li><span>About Us</span>
<ul>
<li><span>About 1</span></li>
<li><span>About 2</span></li>
</ul>
</li>
<li><span>Portfolio</span>
<ul>
<li><span>All Projects</span></li>
<li><span>Single Type #1</span></li>
<li><span>Single Type #2</span></li>
</ul>
</li>
<li><span>Services</span>
<ul>
<li><span>Services 1</span></li>
<li><span>Services 2</span></li>
</ul>
</li>
<li><span>News</span></li>
<li><span>Contact</span></li>
</ul>
</div>
css file code
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu li {
position: relative;
}
.sf-menu ul {
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 99;
}
.sf-menu > li {
float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
display: block;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu ul ul {
top: 0;
left: 100%;
}
/*** DEMO SKIN ***/
.sf-menu {
float: left;
}
.sf-menu ul {
box-shadow: 2px 2px 6px rgba(0,0,0,.2);
min-width: 12em; /* allow long menu items to determine submenu width */
*width: 12em; /* no auto sub width for IE7, see white-space comment below */
}
.sf-menu > li > a {
color: #fff;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
-webkit-font-smoothing: antialiased;
display: block;
margin: 0;
line-height: 70px;
padding: 0 40px;
}
.sf-menu a {
text-decoration: none;
zoom: 1; /* IE7 */
}
.sf-menu a {
color: #fff;
}
.sf-menu ul {
position: absolute;
min-width: 250px;
background: #fff;
z-index: 1000;
-webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.2);
-moz-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.2);
box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.2);
padding: 30px 0 30px 30px;
}
.sf-menu li {
white-space: nowrap; /* no need for Supersubs plugin */
*white-space: normal; /* ...unless you support IE7 (let it wrap) */
-webkit-transition: background .2s;
transition: background .2s;
}
.sf-menu ul li {
background: #fff;
color: #888;
}
.sf-menu ul li a {
color: #888;
text-transform: uppercase;
font-size: 12px;
padding: 15px 20px;
display: block;
font-weight: 600;
}
.sf-menu ul ul li {
background: #fff;
}
.sf-menu li:hover,
.sf-menu li.sfHover {
background: #fff;
color:#222;
/* only transition out, not in */
-webkit-transition: none;
transition: none;
}
/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
padding-right: 2.5em;
*padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
}
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
content: '';
position: absolute;
top: 50%;
right: 1em;
margin-top: -3px;
height: 0;
width: 0;
/* order of following 3 rules important for fallbacks to work */
border: 5px solid transparent;
border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
border-top-color: rgba(255,255,255,.5);
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
border-top-color: white; /* IE8 fallback colour */
}
/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
margin-top: -5px;
margin-right: -3px;
border-color: transparent;
border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
border-left-color: rgba(255,255,255,.5);
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
border-left-color: white;
}
/*** custom css ***/
.sf-menu li.selected,
.sf-menu li.current-cat,
.sf-menu li.current-cat-parent,
.sf-menu li.current_page_item,
.sf-menu li.current_page_parent,
.sf-menu li.current_page_ancestor {
background:#fff;
color:#222;
}
.sf-menu li.current_page_item a {
color:#222;
}

You need to include the anchor after the hover.
I've commented next to the section in your code, after this css .sf-menu li:hover a,
.sf-menu li.sfHover a {}
body {background: grey;}
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu li {
position: relative;
}
.sf-menu ul {
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 99;
}
.sf-menu > li {
float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
display: block;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu ul ul {
top: 0;
left: 100%;
}
/*** DEMO SKIN ***/
.sf-menu {
float: left;
}
.sf-menu ul {
box-shadow: 2px 2px 6px rgba(0,0,0,.2);
min-width: 12em; /* allow long menu items to determine submenu width */
*width: 12em; /* no auto sub width for IE7, see white-space comment below */
}
.sf-menu > li > a {
color: #fff;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
-webkit-font-smoothing: antialiased;
display: block;
margin: 0;
line-height: 70px;
padding: 0 40px;
}
.sf-menu a {
text-decoration: none;
zoom: 1; /* IE7 */
}
.sf-menu a {
color: #fff;
}
.sf-menu ul {
position: absolute;
min-width: 250px;
background: #fff;
z-index: 1000;
-webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.2);
-moz-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.2);
box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.2);
padding: 30px 0 30px 30px;
}
.sf-menu li {
white-space: nowrap; /* no need for Supersubs plugin */
*white-space: normal; /* ...unless you support IE7 (let it wrap) */
-webkit-transition: background .2s;
transition: background .2s;
}
.sf-menu ul li {
background: #fff;
color: #888;
}
.sf-menu ul li a {
color: #888;
text-transform: uppercase;
font-size: 12px;
padding: 15px 20px;
display: block;
font-weight: 600;
}
.sf-menu ul ul li {
background: #fff;
}
.sf-menu li:hover a,
.sf-menu li.sfHover a { /* ADDED YOUR ANCHOR TO THIS SELECTOR */
background: #fff;
color:#222;
/* only transition out, not in */
-webkit-transition: none;
transition: none;
}
/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
padding-right: 2.5em;
*padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
}
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
content: '';
position: absolute;
top: 50%;
right: 1em;
margin-top: -3px;
height: 0;
width: 0;
/* order of following 3 rules important for fallbacks to work */
border: 5px solid transparent;
border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
border-top-color: rgba(255,255,255,.5);
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
border-top-color: white; /* IE8 fallback colour */
}
/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
margin-top: -5px;
margin-right: -3px;
border-color: transparent;
border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
border-left-color: rgba(255,255,255,.5);
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
border-left-color: white;
}
/*** custom css ***/
.sf-menu li.selected,
.sf-menu li.current-cat,
.sf-menu li.current-cat-parent,
.sf-menu li.current_page_item,
.sf-menu li.current_page_parent,
.sf-menu li.current_page_ancestor {
background:#fff;
color:#222;
}
.sf-menu li.current_page_item a {
color:#222;
}
<div id="mainmenu">
<ul class="sf-menu">
<li><span>Home</span></li>
<li><span>About Us</span>
<ul>
<li><span>About 1</span></li>
<li><span>About 2</span></li>
</ul>
</li>
<li><span>Portfolio</span>
<ul>
<li><span>All Projects</span></li>
<li><span>Single Type #1</span></li>
<li><span>Single Type #2</span></li>
</ul>
</li>
<li><span>Services</span>
<ul>
<li><span>Services 1</span></li>
<li><span>Services 2</span></li>
</ul>
</li>
<li><span>News</span></li>
<li><span>Contact</span></li>
</ul>
</div>

Change the below code
.sf-menu > li > a {color:#000}

Is this what you want?
.sf-menu > li a:hover{
color: red;
}

Drop Down Menu Goes Away To Quick

When I go to a sub menu on my Parent Link when I try and go to the grand child link the menu goes away to quick and does not allow me some times to click on the grand child link.
How can I make it so that can stay open until I click on a sub menu link or grand child link.
Codepen Example Here: http://codepen.io/riwakawebsitedesigns/pen/PwaemX
a.menu-link {
float: right;
display: block;
padding: 1em;
}
.menu, .menu > ul ul {
clear: both;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.js .menu, .js .menu > ul ul {
overflow: hidden;
max-height: 0;
background: rgba(0,0,0,0.1);
}
.menu.active, .js .menu > ul ul.active {
max-height: 55em;
}
.menu > ul {
border-top: 1px solid #808080;
}
.menu li a {
color: #000;
display: block;
padding: 0.8em;
border-bottom: 1px solid #808080;
position: relative;
}
.menu li.has-subnav > a:after {
content: '+';
position: absolute;
top: 0;
right: 0;
display: block;
font-size: 1.5em;
padding: 0.25em 0.5em;
}
.menu li.has-subnav > a.active:after {
content: "-";
}
/* Start Mobile */
#media screen and (min-width: 48.25em) {
.pattern {
overflow: visible;
}
a.menu-link {
display: none;
}
.js .menu, .js .menu > ul ul {
max-height: none;
overflow: visible;
background: none;
}
.js .menu > ul ul {
background: #808080;
display: none;
}
.js .menu > ul li:hover > ul {
display: block;
}
.menu ul {
margin: 0 0 0 -0.25em;
border: 0;
}
.menu li a {
border: 0;
}
.menu li.has-subnav > a {
padding-right: 2em;
}
.menu li.has-subnav > a:after {
content: ">";
font-size: 1em;
padding: 0.8em 0.5em;
}
.menu .level-1 > li.has-subnav > a:after {
content: "▼";
}
.menu > ul li {
margin: 0 0.25em;
}
.menu > ul > li {
display: inline-block;
position: relative;
}
.menu > ul ul {
position: absolute;
top: 0;
left: 12em;
width: 12em;
}
.menu > ul ul li {
position: relative;
}
.menu > ul ul.level-2 {
top: 3em;
left: 0;
}
}
/* End Mobile */

This style causes the problem, because it creates a gap between the levels:
.menu > ul li {
margin: 0 0.25em;
}
Change it to this:
.menu > ul li {
padding: 0 0.25em;
}
Updated Codepen

you used left:12emto .menu > ul ul. For this, third ul is going so far. Use maximum 11.5em to .menu > ul ul below the example is ...
.menu > ul ul{
position: absolute;
top: 0;
left: 11.5em;
width: 12em;
}

Top bar break point - Foundation 5

I have upgraded from Foundation 4 to Foundation 5, and I am trying to set up a custom break point in the top bar without using Sass.
In foundation 4 you were able to change the following css code in the foundation.css file:
.top-bar-js-breakpoint {
width: 48em !important;
...
}
#media only screen and (min-width: 48em) {
...
}
But this isn't possible with Foundation 5, atleast I am not able to find the piece of CSS or JS code to change it.
I have also tried redownloading a new custom foundation installation with the TOP BAR BREAKPOINT set to 9999em, which just does not work. Even after removing all previous files and code.
This simple problem is driving me nuts, so it would be great if someone would put me out my misery with a simple sollution, please!
Thanks in advance.

Find the meta.foundation-mq-topbar css selector in your code and change width attribute value to 48em or any other size you want.
Another solution:
Foundation separate components media query from each other, so you can change breakpoint for each components. Look at this code:
#media only screen and (min-width: 40.063em) {
.top-bar {
background: #333333;
*zoom: 1;
overflow: visible; }
.top-bar:before, .top-bar:after {
content: " ";
display: table; }
.top-bar:after {
clear: both; }
.top-bar .toggle-topbar {
display: none; }
.top-bar .title-area {
float: left; }
.top-bar .name h1 a {
width: auto; }
.top-bar input,
.top-bar .button {
font-size: 0.875rem;
position: relative;
top: 7px; }
.top-bar.expanded {
background: #333333; }
.contain-to-grid .top-bar {
max-width: 62.5em;
margin: 0 auto;
margin-bottom: 0; }
.top-bar-section {
-webkit-transition: none 0 0;
-moz-transition: none 0 0;
transition: none 0 0;
left: 0 !important; }
.top-bar-section ul {
width: auto;
height: auto !important;
display: inline; }
.top-bar-section ul li {
float: left; }
.top-bar-section ul li .js-generated {
display: none; }
.top-bar-section li.hover > a:not(.button) {
background: #272727;
color: white; }
.top-bar-section li a:not(.button) {
padding: 0 15px;
line-height: 45px;
background: #333333; }
.top-bar-section li a:not(.button):hover {
background: #272727; }
.top-bar-section .has-dropdown > a {
padding-right: 35px !important; }
.top-bar-section .has-dropdown > a:after {
content: "";
display: block;
width: 0;
height: 0;
border: inset 5px;
border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent;
border-top-style: solid;
margin-top: -2.5px;
top: 22.5px; }
.top-bar-section .has-dropdown.moved {
position: relative; }
.top-bar-section .has-dropdown.moved > .dropdown {
display: none; }
.top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown {
display: block; }
.top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
border: none;
content: "\00bb";
top: 1rem;
margin-top: -2px;
right: 5px; }
.top-bar-section .dropdown {
left: 0;
top: auto;
background: transparent;
min-width: 100%; }
.top-bar-section .dropdown li a {
color: white;
line-height: 1;
white-space: nowrap;
padding: 12px 15px;
background: #333333; }
.top-bar-section .dropdown li label {
white-space: nowrap;
background: #333333; }
.top-bar-section .dropdown li .dropdown {
left: 100%;
top: 0; }
.top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
border-bottom: none;
border-top: none;
border-right: solid 1px #4d4d4d;
clear: none;
height: 45px;
width: 0; }
.top-bar-section .has-form {
background: #333333;
padding: 0 15px;
height: 45px; }
.top-bar-section ul.right li .dropdown {
left: auto;
right: 0; }
.top-bar-section ul.right li .dropdown li .dropdown {
right: 100%; }
.no-js .top-bar-section ul li:hover > a {
background: #272727;
color: white; }
.no-js .top-bar-section ul li:active > a {
background: #2ba6cb;
color: white; }
.no-js .top-bar-section .has-dropdown:hover > .dropdown {
display: block; }
}
You have to find the above code and just change this media query for changing top bar breakpoint.

Okay, I think I have the CSS changes pinned after the SCSS compiles.
Search for .top-bar in your CSS and look for the entry similar to the below, and change "981px" as needed:
#media only screen and (min-width: 981px) {
.top-bar {
background: linear-gradient(to bottom, #7d7d7d 0%, #646464 100%);
*zoom: 1;
overflow: visible
}
Search for meta.foundation-mq-topbar in your CSS and change "981px" as needed:
meta.foundation-mq-topbar {
font-family: "/only screen and (min-width: 981px)/";
width: 981px
}

Basically what i did to make it work after reading the solution from Parhum. Search for the
meta.foundation-mq-topbar. There should be a width corresponding to it, in my case which is the 40.063em.This one has to be changed. Now, look for the corresponding media query (i.e. #media only screen and (min-width:40.063em)) Change BOTH of the width in both of the line. It should be working fine now.
meta.foundation-mq-topbar {
font-family: "/only screen and (min-width:64.00em)/";
width: 64.00em !the width of this must change; }
#media only screen and (min-width: 64.00em) {
.top-bar {
background: #333333;