We Keep Coding

Border bottom menu when user active on hover

I made a menu fixed and sticky. Menu border bottom bar is active when the user hover mouse on it but what I want is when the user is on source section, previous Call Data section will still be active. Current and previous sections, both will be active. Can someone help me with this?
see the images of the menu please,
Call Data
Source
<div class="nav" id="myNav">
<ul>
<li>Call Data</li>
<li>Source</li>
<li>Lead</li>
<li>Address</li>
<li>Motivation</li>
<li>Property</li>
<li>Visit</li>
<li>Finish</li>
</ul>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i></a>
</div>
and css here,
ul {
margin: 0;
padding: 0;
list-style: none;
}
.nav {
position: sticky;
top: 0;
overflow: hidden;
background-color: white;
position: -webkit-sticky;
/* Safari */
position: -moz-sticky;
/* firefox */
z-index: 5;
}
.nav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 24px;
text-decoration: none;
font-size: 17px;
}
.nav a:hover {
color: green;
border-bottom: 3px solid green;
}
.nav a.active {
color: green;
border-bottom: 3px solid green;
}
.nav .icon {
display: none;
}
#media screen and (max-width: 1210px) {
.nav a:not(:first-child) {
display: none;
}
.nav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 1210px) {
.nav.responsive {
position: sticky;
top: 0;
overflow: hidden;
background-color: white;
position: -webkit-sticky;
/* Safari */
position: -moz-sticky;
/* Safari */
z-index: 5;
opacity: 0.9;
}
.nav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.nav.responsive a {
float: none;
display: block;
text-align: left;
}
}

You could try with a css siblings selector, e.g.:
li > a[href="#source"]:hover ~ li > a[href="#call-data"]{
color: green;
border-bottom: 3px solid green;
}
if this doesn't work you can use jquery, with the good old $('#element').hover(); method.

try this
.nav a:visited {
color: green;
border-bottom: 3px solid green;
}
Let me know if you have any doubt.

responsive navbar using display:none still shows even it is meant to show when the screen resized using media query

i'm trying to fix my responsive navigation bar. supposed to be, when the screen is resized smaller, the navigation will change to a single button which is "menu" and when clicked, it will toggle the navigation vertically. the problem is, even at full screen size, the menu still shows up. this should only appear when screen was changed. thank you
HTML:
<div class="nav">
<ul>
<li ><a class="active" href="index.php">Home</li>
<li >About us
<ul>
<li>Company Profile</li>
<li>Management</li>
<li>Testimonials</li>
<li>Services</li>
</ul>
</li>
<li >Contacts</li>
<li >Careers</li>
<li >Blog
<ul>
<li>Tips</li>
<li>Success Story</li>
</ul>
</li>
<li class="contact">Login</li>
</ul>
<div class="handle"> Menu </div>
</div>
CSS:
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
MEDIA
********************************************/
.handle.hidden {
width: 100%;
background: white;
text-align: left;
box-sizing: border-box;
padding: 15px 10px;
cursor: pointer;
color: white;
display: none;
}
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.showing { max-height: 20em; }
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
.handle{
display: block;
background-color: rgba(0,0,0,0.8);
}
}
SCRIPT:
<script type="text/javascript">
$('.handle').on('click', function(){
$('nav ul').toggleClass('showing');
});
</script>

With your current code you would need to add the class .hidden dinamically to the .menu html element which is not very convenient but there is a simpler way to make the menu disappear. Just try:
.handle { /* now we don't use the .hidden class */
width: 100%;
background: white;
text-align: left;
box-sizing: border-box;
padding: 15px 10px;
cursor: pointer;
color: white;
display: block;
}
...
/* inside media query */
#media screen and (min-width: 650px) {
.handle {
display: none; /* this hides the menu on bigger screens */
background-color: rgba(0,0,0,0.8);
}
}

Javascript codes not working in fluid layouts + Adobe CS6 Dreamweaver

I have started learning responsive web sites. As a part of it I started using Fluid Grid Layout with Dreamviewer CS 6. But the problem is that java script functions are not working for toggles.
[------------------------------Nav Bar(nav)--------------------------------------------------------------------] [profile]
As shown in the figure profile div has a drop down menu and for the nav bar when the screen width is below 480, horizontal nav bar will convert will change to vertical bar and has a toggle to show submenu.
help me out
//right click disable
$(function() {
$(this).bind("contextmenu", function(e) {
e.preventDefault();
});
});
//drop down -logout
$(document).ready(function() {
$(".account").click(function() {
var X=$(this).attr('id');
if(X==1) {
$(".submenu").hide();
$(this).attr('id', '0');
} else {
$(".submenu").show();
$(this).attr('id', '1');
}
});
//Mouse click on sub menu
$(".submenu").mouseup(function() {
return false;
});
//Mouse click on my account link
$(".account").mouseup(function(){
return false;
});
//Document Click
$(document).mouseup(function(){
$(".submenu").hide();
$(".account").attr('id', '');
});
});
#charset "utf-8";
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {
max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}
/*
Dreamweaver Fluid Grid Properties
----------------------------------
dw-num-cols-mobile: 5;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 12;
dw-gutter-percentage: 25;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
*/
/* Mobile Layout: 480px and below. */
#media only screen and (max-width: 480px) {
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 87.36%;
padding-left: 1.82%;
padding-right: 1.82%;
}
#nav {
clear: none;
float: left;
text-align : center;
margin-left: 4.1666%;
width: 58.3333%;
display: block;
}
#nav > ul {
border: 1px solid #e5e5e5;
border-radius: 5px;
list-style-type: none;
margin: 0;
padding: 0;
max-width: 200px;
}
#nav > ul > li a {
display: block;
text-decoration: none;
padding: 10px;
color: #666;
}
#nav > ul > li > a {
border-bottom: 1px solid #e5e5e5;
}
#nav > ul > li > a:hover {
color: #000;
background: #e5e5e5;
}
#nav > ul > li > a.active {
background: #e5e5e5;
}
#nav > ul > li ul {
display: none;
padding: 10px 20px 10px 30px;
border: none;
border-bottom: 1px solid #e5e5e5;
}
#nav > ul > li ul li {
padding-left: 5px;
}
#nav > ul > li ul li a {
border: 0;
padding: 5px 10px 5px 0;
}
#nav > ul > li ul li a:hover {
color: #000;
}
#nav > ul > li.dropdown {
position: relative;
}
#nav > ul > li.dropdown:after {
content: "";
position: absolute;
right: 10px;
top: 14px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #686868;
}
#nav > ul > li.dropdown.open:after {
content: "";
position: absolute;
right: 12px;
top: 17px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #686868;
}
#profile {
clear: none;
float: left;
margin-left: 20.1666%;
width: 16.6666%;
display: block;
color: #555;
text-align:left;
}
.submenu {
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
clear:both;
}
#profile li a {
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
}
#profile li a:hover {
background:#155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account {
font-size: 11px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
cursor:pointer;
}
.root {
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
.gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
}
#nav {
clear: none;
float: left;
margin-left: 2.5641%;
width: 74.3589%;
display: block;
text-align : center;
}
#nav ul ul {
display : none;
}
#nav ul li:hover > ul {
display : block;
}
#nav ul {
background-color : #fff;
margin-top : 10px;
padding : 0 20px;
list-style : none;
position : relative;
display: inline-block;
zoom: 1;
*display: inline;
margin-right : -80px;
font-family :'Lato', sans-serif;
text-transform : uppercase;
font-size : 1em;
}
#nav ul li {
float : left;
}
#nav ul li:hover {
border-bottom : 5px solid #339966;
color : #fff;
}
#nav ul li a:hover {
color : #ffffff;
background : #1bbc9b;
}
#nav ul li a {
display : block;
padding : 0.3em 0.8em;
font-family :'Lato', sans-serif;
font-size : 0.9em;
color : #444;
text-decoration : none;
}
#nav ul ul {
background-color : #fff;
border-radius : 0;
padding : 0;
position : absolute;
top : 100%;
box-shadow : 0 0 9px rgba(0, 0, 0, 0.15);
z-index: 999999
}
#nav ul ul li {
float : none;
position : relative;
font-family :'Lato', sans-serif;
text-transform : uppercase;
font-size : 0.85em;
}
#nav ul ul li a {
padding : 0.4em 1.2em;
color : #000;
font-family :'Lato', sans-serif;
text-transform : uppercase;
font-size : 1em;
}
#nav ul ul:before {
content :"";
display : block;
height : 20px;
position : absolute;
top : -20px;
width : 100%;
}
#profile {
clear: none;
float: left;
margin-left: 12.5641%;
width: 10.2564%;
display: block;
color: #555;
text-align:left;
}
.submenu {
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
clear:both;
}
#profile li a {
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
}
#profile li a:hover {
background:#155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account {
font-size: 11px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
cursor:pointer;
}
.root {
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
#media only screen and (min-width: 769px) {
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
}
#nav {
clear: none;
float: left;
margin-left: 1.6949%;
width: 83.0508%;
display: block;
text-align : center;
}
#nav ul ul {
display : none;
}
#nav ul li:hover > ul {
display : block;
}
#nav ul {
background-color : #fff;
margin-top : 10px;
padding : 0 20px;
list-style : none;
position : relative;
display: inline-block;
zoom: 1;
*display: inline;
margin-right : -80px;
font-family :'Lato', sans-serif;
text-transform : uppercase;
font-size : 1em;
}
#nav ul li {
float : left;
}
#nav ul li:hover {
border-bottom : 5px solid #339966;
color : #fff;
}
#nav ul li a:hover {
color : #ffffff;
background : #1bbc9b;
}
#nav ul li a {
display : block;
padding : 0.3em 0.8em;
font-family :'Lato', sans-serif;
font-size : 0.9em;
color : #444;
text-decoration : none;
}
#nav ul ul {
background-color : #fff;
border-radius : 0;
padding : 0;
position : absolute;
top : 100%;
box-shadow : 0 0 9px rgba(0, 0, 0, 0.15);
z-index: 999999
}
#nav ul ul li {
float : none;
position : relative;
font-family :'Lato', sans-serif;
text-transform : uppercase;
font-size : 0.85em;
}
#nav ul ul li a {
padding : 0.4em 1.2em;
color : #000;
font-family :'Lato', sans-serif;
text-transform : uppercase;
font-size : 1em;
}
#nav ul ul:before {
content :"";
display : block;
height : 20px;
position : absolute;
top : -20px;
width : 100%;
}
#profile {
clear: none;
float: left;
margin-left: 6.6949%;
width: 6.7796%;
display: block;
}
.submenu {
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
clear:both;
}
#profile li a {
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
}
#profile li a:hover {
background:#155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account {
font-size: 11px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
cursor:pointer;
}
.root {
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}
}
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="scripts/boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/fluidcss.css" rel="stylesheet" type="text/css">
<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="scripts/respond.min.js"></script>
<script src="scripts/func1.js"></script>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.ajax.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.verticalnav > li > a').click(function(){
$(this).parent().toggleClass('open');
$(this).siblings().toggle();
});
});
</script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="nav">
<ul>
<li class="dropdown">Home</li>
<li class="dropdown">Portfolio
<ul>
<li>Active Directory</li>
<li>HelpDesk</li>
<li>CTS</li>
<li>Exchange/Infra</li>
<li>Others</li>
</ul>
</li>
<li class="dropdown">Downloads</li>
<li class="dropdown">Blog</li>
<li class="dropdown">News</li>
<li class="dropdown">Contact US</li>
</ul>
</div>
<div id="profile">
<a class="account" >Account</a>
<div class="submenu">
<ul class="root">
<li ><a href="#Dashboard" >Dashboard</a></li>
<li ><a href="#Profile" >Profile</a></li>
<li >Settings</li>
<li >LogOut</li>
</ul>
</div>
</div>
</div>
</body>
</html>

Do these following changes:
Replace the bind function.
$(function() {
$(document).bind("contextmenu", function(e) {
e.preventDefault();
});
$("body").bind("contextmenu", function(e) {
e.preventDefault();
});
});
You have given:
var X = $(this).attr('id');
if (X == 1) {
But there's no single element or element with .account has an ID and none has an ID with 1.
These event handlers do not make any sense:
$(".submenu").mouseup(function() {
return false;
});
$(".account").mouseup(function(){
return false;
});
Why have you given them?
And finally, this is not gonna work:
$(document).mouseup(function(){
$(".submenu").hide();
$(".account").attr('id', '');
});
The whole JavaScript screws up the whole page's working. So you need to extensively correct them before you do anything!

Javascript drop-down menu: fadeIn a particular line, show all others

I have a super simple JS menu that currently fades in all the items "Turf" "Benches" "Devices".
Can anyone think of a way to FadeIn just "Turf" while Benches and Devices shows up right away???
Thanks!
Dan
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
* { margin: 0; padding: 0; }
body { font: 14px Helvetica, Sans-Serif; }
#page-wrap { width: 800px; margin: 25px auto; }
a { text-decoration: none; }
ul { list-style: none; }
p { margin: 15px 0; }
/*
LEVEL ONE
*/
ul.dropdown { position: relative; }
ul.dropdown li { font-weight: bold; float: left; zoom: 1; background: #ccc; }
ul.dropdown a:hover { color: #000; }
ul.dropdown a:active { color: #ffa500; }
ul.dropdown li a { display: block; padding: 4px 8px; border-right: 1px solid #333;
color: #222; }
ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover { background: #f39673; color: black; position: relative; }
ul.dropdown li.hover a { color: black; }
/*
LEVEL TWO
*/
ul.dropdown ul { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li { font-weight: normal; background: #f6f6f6; color: #000;
border-bottom: 1px solid #ccc; float: none; }
/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a { border-right: none; width: 100%; display: inline-block; }
/*
LEVEL THREE
*/
ul.dropdown ul ul { left: 100%; top: 0; }
ul.dropdown li:hover > ul { visibility: visible; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul.dropdown li").hover(function(){
$(this).addClass("hover");
//$('ul:first',this).css('visibility', 'visible').hide().fadeIn(1000);
$('li',this).css('visibility', 'visible').hide().fadeIn(3000);
console.log("test");
}, function(){
$(this).removeClass("hover");
//$('ul:first',this).css('visibility', 'hidden');
$('li',this).css('visibility', 'hidden');
});
$("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
});
</script>
</head>
<body>
<div id="page-wrap">
<ul class="dropdown">
<li>For Facilities
<ul class="sub_menu">
<li>Turf</li>
<li>Benches</li>
<li>Devices</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

How do i get the submenus to show with a small window size?

I have a basic menu bar that works on click. Everything works properly, but i noticed that if i make the browser window too small, the submenus open out of view and i can't scroll in the window to see them.
It is really easy to see what i am talking about if you view it on a mobile phone.
How would i auto add scroll bars to make sure that all my page's content can be seen?
Fiddle: http://jsfiddle.net/2SC5G/6/
SEARCH > RESULTS > LATEST SMOKE RESULTS is the longest selection in this demo. in order to see what i an talking about, resize the browser and put the right border right next to the "Search" menu item.
Thanks in advance.
HTML:
<!-- <LINK REL="SHORTCUT ICON" HREF="favicon.ico"> -->
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="includes/tp_menu.js"></script></script>
<link type="text/css" href="includes/tp_menu.css" rel="stylesheet" />
</head>
<body>
<div style="z-index:100;width:100%;position:fixed;top:0;left: 0;min-width:1000px;">
<div id="menuJQ">
<ul class="menuJQ">
<li class="parent"><span>Home</span></li>
<li><a class="parent" href="#"><span>Product View</span></a>
<div id="submenu">
<ul>
<li><span>DevTask Search</span></li>
<li><span>Active Machines</span></li>
</ul>
</div>
</li>
<li class="parent"><span>Request Tool</span></li>
<li><span>Search</span>
<div id="submenu">
<ul>
<li><span>DevTask Search</span></li>
<li><span>Active Machines</span></li>
<li><span>Integrity Query</span></li>
<li><span>Internal DevTasks</span></li>
<li><span>Results</span>
<div id="submenu">
<ul>
<li><a href="#" target='_blank'><span>Latest Smoke Results</span></a></li>
<li><a href="#" target='_blank'><span>Latest Smoke Results</span></a>
<div id="submenu">
<ul>
<li><span>DevTask Search</span></li>
<li><span>Active Machines</span></li>
<li><span>Integrity Query</span></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li><span>Issues for Stability Team</span></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS:
/* menu::base */
.expand{
display:block;
}
.collapse{
display:none;
}
div#menuJQ {
height: 46px;
padding-left: 0px;
width:auto;
/*background: url(../includes/images/right2.png) repeat right 0;*/
background-color:black;
}
div#menuJQ ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
div#menuJQ ul.menuJQ {
padding-right: 0px;
}
div#menuJQ li {
position: relative;
margin: 0;
padding: 0;
display: block;
float: left;
z-index: 9;
width: auto;
}
div#menuJQ ul ul li {
z-index: 9;
}
div#menuJQ li div {
list-style: none;
float: left;
position: absolute;
z-index: 11;
top: 39px;
left: -18px;
-left: 4px;
visibility: hidden;
transition-delay: 0.5s;
-moz-transition-delay: 0.5s; /* Firefox 4 */
-webkit-transition-delay: 0.5s; /* Safari and Chrome */
-o-transition-delay: 0.5s; /* Opera */
width: 180px;
margin: 0px 0 0 -4px;
padding: 0;
background: url(../includes/images/submenu-top.png) no-repeat 0px 0;
-background: url(../includes/images/submenu-top.gif) no-repeat 0px 0;
}
div#menuJQ ul ul { /*submenu*/
display:none;
z-index: 12;
width: 180px;
padding: 0px 0px 12px 0px;
-padding: 0px 0px 3px 0px;
/*background: url(../includes/images/submenu-bottom.png) no-repeat 0px bottom;*/
background-color:black;
-background: #E4E4E2 none;
margin: 14px 0 0 0;
-margin: 5px 0 0 0;
}
div#menuJQ li > div {
visibility: visible;
}
div#menuJQ a {
position: relative;
z-index: 10;
height: 38px;
display: block;
float: left;
line-height: 38px;
text-decoration: none;
margin-top: 1px;
white-space: nowrap;
width: auto;
padding-right:5px;
text-align:center;
}
div#menuJQ span {
margin-top: 2px;
padding-left: 15px;
color: #fff;
font: normal 13px Tahoma;
background: none;
line-height: 38px;
display: block;
cursor: pointer;
background-repeat: no-repeat;
background-position: 95% 0;
text-align: center;
}
/* menu::level1 */
div#menuJQ a {
padding: 0 15px 0 0;
line-height: 38px;
height: 46px;
_margin-right: 1px;
background: none;
font-weight:bold;
}
div#menuJQ span {
font-weight:bold;
}
div#menuJQ a:hover{
background-image: url(../includes/images/selected-sub.png);
background-repeat: repeat-x;
background-position: right -1px;
-background: url(../includes/images/selected-sub.gif) repeat-x right -1px;
}
div#menuJQ li.current a,
div#menuJQ ul.menuJQ>li:hover>a {
background-image: url(../includes/images/selected-sub.png);
background-repeat: repeat-x;
background-position: right -1px;
-background: url(../includes/images/selected-sub.gif) repeat-x right -1px;
}
div#menuJQ a:hover span{
color: #ff9900;
}
div#menuJQ ul.menuJQ>li:hover>a span {
color: #ff9900;
}
div#menuJQ li {}
div#menuJQ li.last { background: none; }
/* menu::level2 */
div#menuJQ ul ul li {
background-image: url(../includes/images/sep-sub.png);
background-repeat: repeat-x;
background-position: left bottom;
margin: 0;
padding: 0;
}
div#menuJQ ul ul li:hover {
background-image: url(../includes/images/sub-item-hover.gif);
background-color: #717171;
background-repeat: repeat-x;
background-position: left top;
}
div#menuJQ ul ul a {
color: #ff9900;
height: auto;
float: none;
display: block;
line-height: 25px;
font-size: 13px;
z-index: -1;
padding: 6px 0 6px 0px;
white-space: normal;
width: 166px;
margin: 0 0px 0 13px;
background: none;
}
div#menuJQ ul ul a span {
color: #ff9900;
padding: 0 3px;
line-height: 25px;
font-size: 13px;
font-weight: normal;
margin:0;
}
div#menuJQ li.current ul a,
div#menuJQ li.current ul a span {
background: none;
}
div#menuJQ ul ul a:hover {
background: none;
color: #fff;
}
div#menuJQ ul ul a:hover span {
background: none;
color: #fff;
}
div#menuJQ ul ul a.parent {
background: url(../includes/images/submenu-pointer.png) no-repeat right top;
-background: url(../includes/images/submenu-pointer.gif) no-repeat right top;
margin-right: -1px;
}
div#menuJQ ul ul a.parent span {
padding-right: 26px;
}
div#menuJQ ul ul a.parent:hover {
background: url(../includes/images/submenu-pointer-hover.gif) no-repeat right top;
-background: url(../includes/images/submenu-pointer.gif) no-repeat right top;
}
div#menuJQ ul ul a.parent:hover span {
}
div#menuJQ ul ul span {
margin-top: 0;
text-align: left;
}
div#menuJQ ul ul li.last { background: none; }
div#menuJQ ul ul li {
width: 100%;
}
/* menu::level3 */
div#menuJQ ul ul div {
width: 180px;
padding: 0;
background: url(../includes/images/subsubmenu-top.png) no-repeat 0px 0;
-background: url(../includes/images/subsubmenu-top.gif) no-repeat 0px 0;
margin: -32px 0 0 198px !important;
margin: -32px 0 0 176px;
}
div#menuJQ ul ul ul {
padding: 11px 0px 9px 0px;
margin: 20px 0 0 0;
}
div#menuJQ ul ul div li {
position:relative;
top:-10px;
}
/* lava lamp */
div#menuJQ li.back {
background: url(../includes/images/selected-sub.png) no-repeat 0 0;
-background: url(../includes/images/selected-sub.gif) no-repeat 0 0;
width: 5px;
height: 46px;
z-index: 8;
position: absolute;
padding: 0;
margin: 0px 0 0 0;
}
div#menuJQ li.back .left {
padding:0;
width:auto;
background: url(../includes/images/selected-sub.png) repeat-x right 0;
-background: url(../includes/images/selected-sub.gif) repeat-x right 0;
height: 46px;
margin: 0 0 0 5px;
float: none;
position: relative;
top: 0;
left: 0;
visibility: visible;
}
JQuery:
$(document).ready(function(){
$('#menuJQ > ul li').click(function(e) {
e.preventDefault();
$('ul:first', this).show();
});
$('#menuJQ > ul li').mouseleave(function() {
$('ul', this).hide();
});
$('#submenu > ul li a').click(function(e) {
e.preventDefault();
window.location = (this).href;
// var test = (this).href;
// alert(test);
});
});

Put all of the CSS that you wrote into a media query:
#media only screen and (min-width: 900px) {
.expand{
display:block;
}
}
This will make it only work when the screen is wider than 900px. You can change that number of pixels.
Now write the CSS that you want only for mobile, outside the media query. Styles in the mdeia query will overwrite, but only when the condition is met.
If you want a widget for lists, you can visit my page:
http://instancia.net/jquery-plugin-mobile-list/
Shrink your browser width to see the widget. Zip file in page.