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
Related
Relevant code is below, full code is here. The code for the nav follows this pen: https://codepen.io/taniarascia/pen/dYvvYv and all styles/scripts/html are right. I don't know what caused the services dropdown to not push down the following li elements in mobile view. The drop down worked when I first put it on my site but after messing with a few things seemingly unrelated it does not work and I have no idea at this point what happened. Inspector shows that all the right styles are being applied, and that no extra styles are being applied.
HTML
<div class="main_nav">
<div class="navigation">
<div class="nav-container">
<div class="brand">
<img src="assets/images/logo.svg" style="height: 100%;">
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
<li>
About
</li>
<li>
Services
<ul class="nav-dropdown">
<li>
Web Design
</li>
<!--<li>-->
<!-- Web Development-->
<!--</li>-->
<!--<li>-->
<!-- Graphic Design-->
<!--</li>-->
</ul>
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
<li>
Blog
</li>
</ul>
</nav>
</div>
</div>
</div>
CSS
#charset "UTF-8";
.main_nav {
position: fixed;
top: 0px;
max-height: 70px;
z-index: 10;
width: 100vw;
/* padding-top: 17px; */
background: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
/* padding-bottom: 6px; */
left: 0;
right: 0;
height: 70px;
padding: 10px 4px;
box-sizing: border-box;
}
#media only screen and (max-width: 500px) {
.main_nav {
padding-top: 25px;
}
}
.sticky {
background-color: #ffffff;
opacity: 1;
top: 0px;
}
.navigation {
height: 50px;
background: #ffffff;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
height: 50px;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
/* width: 40%; */
}
.brand a,
.brand a:visited {
color: #5fc3e4;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
nav {
float: right;
height: 50px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
background-color: white;
}
nav ul li {
float: left;
position: relative;
height: 50px;
line-height: 50px;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 50px;
background: #ffffff;
color: #5fc3e4;
text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
color: #cfcfcf;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #ffffff;
height: 70px;
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 50px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #5fc3e4;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
JS
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery); // end jQuery
You have other js errors in the console.
For example:
pen.js:11 Uncaught ReferenceError: $ is not defined
at pen.js:11
And this stops the code coming after it from executing.
Once I cleaned those up (there were 2 or 3), the hamburger started working:
https://codepen.io/lennart_rikk/pen/ZVqJVZ
(NB! In css I changed the main nav opacity to 1, to see the menu)
when I hover around submenu , then when dragging cursor over submenu and hovering over the submenu disappers and only sometimes appear when I select any other nav menu and hover there but it only works sometimes.
Here is my code
html
{ height: 100%;}
*
{ margin: 0;
padding: 0;}
body
{ font: normal .80em 'trebuchet ms', arial, sans-serif;
background: #FFF;
color: #555;}
p
{ padding: 0 0 20px 0;
line-height: 1.7em;}
#menubar
{ width: 880px;
height: 46px;}
ul#menu
{ float: right;
margin: 0;}
ul#menu li
{ float: left;
padding: 0 0 0 9px;
list-style: none;
margin: 1px 2px 0 0;
background: #5A5A5A url(tab.png) no-repeat 0 0;}
ul#menu li a
{ font: normal 100% 'trebuchet ms', sans-serif;
display: block;
float: left;
height: 20px;
padding: 6px 35px 5px 28px;
text-align: center;
color: #FFF;
text-decoration: none;
background: #5A5A5A url(tab.png) no-repeat 100% 0;}
ul#menu li.selected a
{ height: 20px;
padding: 6px 35px 5px 28px;}
ul#menu li.selected
{ margin: 1px 2px 0 0;
background: #00C6F0 url(tab_selected.png) no-repeat 0 0;}
ul#menu li.selected a, ul#menu li.selected a:hover
{ background: #00C6F0 url(tab_selected.png) no-repeat 100% 0;
color: #FFF;}
ul#menu li a:hover
{ color: #E4EC04;}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
display: inline-block;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
margin-top: 35px;
}
/* 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: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
<div id="main">
<div id="menubar">
<ul id="menu" >
<li ><a href="#" >Home</a></li>
<li ><a ref="#" >Contact Us</a></li>
<li >
<div class="dropdown">
<a class="dropbtn">Dropdown</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
</ul>
</div>
</div>
How can I solve this ..
Ay help is appreciated. I tried but I failed and Have no idea how to solve this.
Thanks in advance.
It's because there is a space between the "Dropdown" menu and the dropdown list. Instead of hard coding the margin in px use a percentage. I also recommend using top instead of margin-top. Replace .dropdown-content css with:
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
top: 100%; //To move it up or down more you can use calc like: calc(100% + 1px) or calc(100% - 2px)
}
when you move the mouse from the dropdown menu toggle, into the submenu, you are briefly not hovering over the div due to the margin-top value of the submenu. If you really want that divide between the two add white top border (i.e. border-top: 2px solid white;).
Heres a JSFiddle
Change the CSS as follows:
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
margin-top: 30px;
}
Change the HTML as follows:
<li class="dropdown">
<div>
<a class="dropbtn">Dropdown</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
The issue is simply a gap between li.dropdown and .dropdown-content. It is worth noting that when you move the cursor quickly from the dropdown button to the dropdown list, it does not disappear. However, doing that slowly vanishes the list.
The simplest solution I could think of here is to decrease the top margin of the dropdown list, while adding a top padding to the first list item to compensate for that lost margin (a top margin won't work here). So, your code for the dropdown menu would look like this:
#menubar {
width: 880px;
height: 46px;
}
ul#menu {
float: right;
margin: 0;
}
ul#menu li {
float: left;
padding: 0 0 0 9px;
list-style: none;
margin: 1px 2px 0 0;
background: #5A5A5A url(tab.png) no-repeat 0 0;
}
ul#menu li a {
font: normal 100% 'trebuchet ms', sans-serif;
display: block;
float: left;
height: 20px;
padding: 6px 35px 5px 28px;
text-align: center;
color: #FFF;
text-decoration: none;
background: #5A5A5A url(tab.png) no-repeat 100% 0;
}
ul#menu li.selected a {
height: 20px;
padding: 6px 35px 5px 28px;
}
ul#menu li.selected {
margin: 1px 2px 0 0;
background: #00C6F0 url(tab_selected.png) no-repeat 0 0;
}
ul#menu li.selected a,
ul#menu li.selected a:hover {
background: #00C6F0 url(tab_selected.png) no-repeat 100% 0;
color: #FFF;
}
ul#menu li a:hover {
color: #E4EC04;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
display: inline-block;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
margin-top: 30px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:first-child {
padding-top:17px;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
<div id="main">
<div id="menubar">
<ul id="menu">
<li>Home</li>
<li><a ref="#">Contact Us</a></li>
<li>
<div class="dropdown">
<a class="dropbtn">Dropdown</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
</ul>
</div>
</div>
I implemented the code below, I'm facing an issue on mobile view when clicking the menu button on mobile didn't show the menu but if I didn't scroll down the menu works,
how can i fix this issue on mobile view
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(800);
$("body").toggleClass("hidden");
})
$(window).scroll(function() {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('.centered-logo').height())
{
$('nav').addClass('fixed');
}
else
{
$('nav').removeClass('fixed');
}
});
})
body{height: 3000px;
margin: 0;
padding: 0;
font-family: monospace;
}
.fixed {
position: fixed;
top: 0;
width: 100%;
}
.hidden{
overflow: hidden;
}
nav{
width: 100%;
background: #202c45;
padding: 0 50px;
box-sizing: border-box;
}
nav h1{
margin: 0;
padding: 0;
float: left;
padding-top: 18px;
}
nav h1 a{
color: #fff;
text-decoration: none;
}
nav ul{
margin: 0;
padding: 0;
float: right;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 20px;
transition: 0.5s;
}
nav ul li:hover{
background: #f2184f;
}
nav ul li a{
color: #fff;
text-decoration: none;
}
.responsive-bar{
width: 100%;
background: #202c45;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.responsive-bar h3{
margin: 0;
padding: 3px 0;
float: left;
color:#fff;
}
.responsive-bar h3 a{
color:#fff;
text-decoration: none;
}
.responsive-bar h4{
margin: 0;
padding: 0;
color: #fff;
float: right;
cursor: pointer;
padding: 5px 10px;
background:#f2184f;
text-transform: uppercase;
}
#media (min-width:768px){
nav{
display: block !important;
}
}
#media (max-width:768px){
nav{
display: none;
padding: 0;
}
.responsive-bar{
top:0;
display: block;
position: fixed;
}
nav h1{
display: block;
float: none;
}
nav ul{
float: none;
}
nav ul li{
display: block;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(255,255,255,.1)
}
#full-logo{
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<nav>
<h1 id="full-logo">hola</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div style="clear:both;"></div>
</nav>
<div class="responsive-bar">
<h3 class="brand">MyCar</h3>
<h4 class="menu">Menu</h4>
<div style="clear:both;"></div>
</div>
I have on mobile view an issue when scroll down and click menu button nothing appear but when I was at the to when click menu will appear the menu item
all I need is when scroll down and up the menu appears
how can I fix this issue
The issue is because you set overflow: hidden to your body, while the nav is part of the page flow. The nav will always be offset relative to it's parent.
Here's an example where overflow: hidden is disabled:
http://jsfiddle.net/u9L50243/ (Toggle the menu and then scroll - You'll notice the navigation scrolls in to, and out of the viewport)
The easiest fix is just to apply position: fixed to your nav bar, in addition to the .responsive-bar.
For example: http://jsfiddle.net/ebcvqds7/
When I hover on the product menu in navigation bar the list items of Product menu is not proper positioned. It shows big block. Please help me.
What changes are needed in this code to give a proper look when i hover on the Product menu?
CSS Code:
#nav_barhorizontal{
width:500px;
margin:auto;
}
#nav_barhorizontal ul{
overflow: hidden;
padding: 0;
list-style-type: none;
background-color: #333;
}
#nav_barhorizontal ul li{
float: left;
text-align: center;
width: 120px;
margin: 0px;
}
#nav_barhorizontal ul li a{
color: white;
text-align: center;
padding: 14px;
display:block;
font-family : Calibri;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
margin-left:0px;
}
#nav_barhorizontal ul ul
{
display:none;
}
#nav_barhorizontal ul li:hover ul
{
text-decoration: none;
display: block;
text-align: left;
}
BODY Part Coding:
<div id="nav_barhorizontal">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Contact</li>
<li>
Products
<ul>
<li>Temp1</li>
<li>Temp2</li>
<li>Temp3</li>
</ul>
</li>
<li>About</li>
</ul>
</div>
Thanks..
The problem is caused by setting the background-color on the top-level ul. The submenu is a descendent of the parent ul, so when it is shown, the height of the parent ul is increased and the background color extends down to the bottom.
Moving the rule
background-color: #333;
from the selector
#nav_barhorizontal ul
to the selector
#nav_barhorizontal ul li
seems to fix the problem. Here's the new css:
#nav_barhorizontal{
width:500px;
margin:auto;
}
#nav_barhorizontal ul{
overflow: hidden;
padding: 0;
list-style-type: none;
}
#nav_barhorizontal ul li{
float: left;
text-align: center;
width: 120px;
margin: 0px;
background-color: #333;
}
#nav_barhorizontal ul li a{
color: white;
text-align: center;
padding: 14px;
display:block;
font-family : Calibri;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
margin-left:0px;
}
#nav_barhorizontal ul ul
{
display:none;
}
#nav_barhorizontal ul li:hover ul
{
text-decoration: none;
display: block;
text-align: left;
}
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;
}