We Keep Coding

Responsive menu not working on desktop

I'm trying to create a responsive menu, I've got it to work on mobile but when it opens into desktop browser the menu buttons are wonky and not set to full width.
var geolifygeoredirect = document.createElement('script')
geolifygeoredirect.setAttribute('type', 'text/javascript')
geolifygeoredirect.async = 1
geolifygeoredirect.setAttribute('src', '//www.geolify.com/georedirectv2.php?id=32270&refurl=' + document.referrer)
document.getElementsByTagName('head')[0].appendChild(geolifygeoredirect);
/*Javascript*/
$(function() {
var $page = jQuery.url.attr("file");
$('ul.navigation li a').each(function() {
var $href = $(this).attr('href');
if (($href == $page) || ($href == '')) {
$(this).addClass('on');
} else {
$(this).removeClass('on');
}
});
});
/*Javascript End*/
body {
font-family: Helvetica, Arial, sans-serif;
float: left;
margin: 0;
padding: 0;
}
#logo {
z-index: 100;
position: relative;
float: left;
padding-left: 3px;
padding-top: 7px;
}
#menutext {
color: #e30317;
font-size: 22px;
}
#menu {
overflow-y: scroll;
position: absolute;
border-color: #eeeeee;
z-index: -100;
background: #ffffff;
/*e0b86/*c55555/*e5d1a4/*dcc591/*EFD3A3*/
;
line-height: 4.1em;
font-weight: 200;
width: 100%;
margin: inherit;
color: #c6c6c6;
padding-bottom: 0;
height: 300px;
}
#lines {
position: relative;
object-position: center;
border-color: #e30317;
}
ul.navigation {
background: #fff;
}
ul.navigation li a {
text-decoration: none;
}
ul.navigation li a.on {
background: #eeeeee;
padding: 2px 6px;
min-width: 100%;
}
.mobile-menu {
display: block;
background: #c6c6c6;
/*e0b86/*c55555/*e5d1a4/*dcc591/*EFD3A3*/
;
line-height: 100px;
font-weight: 200;
width: 100%;
text-align: center;
position: fixed;
margin: 0 auto;
color: #c6c6c6
}
/*Strip the ul of padding and list styling*/
.mobile-menu ul {
list-style-type: none;
padding-left: 0;
text-align: center;
width: 100%;
position: relative;
background: #c6c6c6;
position: relative;
height: 50px;
}
/*Create a horizontal list with spacing*/
.mobile-menu li {
display: inline-block;
/*float: left;
margin-right: 1px;*/
}
/*Style for menu links*/
.mobile-menu li a {
display: block;
min-width: 130px;
text-align: center;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #eee;
text-transform: uppercase;
background: #253746;
text-decoration: none;
margin-left: -15px;
padding: 20px 0;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
font-size: 1.0em;
font-weight: bold;
border-color: #e30317;
border-left: 1px solid;
border-top: 1px solid;
border-right: 3px solid;
border-bottom: 0px solid;
height: 70px;
}
/*Hover state for top level links*/
.mobile-menu li:hover a {
color: #333;
background-color: #eee;
}
/*Style for dropdown links*/
.mobile-menu li:hover ul a {
background: #c6c6c6;
color: #FFF;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
.mobile-menu li:hover .mobile-menu ul a:hover {
color: #eee;
}
/*Hide dropdown links until they are needed*/
.mobile-menu li ul {
display: none;
color: #eee
}
/*Make dropdown links vertical*/
.mobile-menu li ul li {
display: none;
float: none;
}
/*Prevent text wrapping*/
.mobile-menu li ul li a {
width: auto;
min-width: 100px;
padding: 0 10px;
}
/*Style 'show menu' label button and hide it by default*/
.mobile-menu .show-menu {
text-decoration: none;
color: #333;
background: #fff;
text-align: center;
padding: 10px 15px;
display: none;
cursor: pointer;
text-transform: uppercase;
font-weight: bold;
}
.mobile-menu .show-menu span {
padding-left: 35px;
}
/*Hide checkbox*/
.mobile-menu input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
.mobile-menu input[type=checkbox]:checked~#menu {
display: block;
color: #333333;
}
/*Responsive Styles*/
#media screen and (max-width: 916px) {
.mobile-menu .lines {
border-bottom: 15px double #f8f8f8;
border-top: 5px solid #f8f8f8;
content: "";
height: 5px;
width: 20px;
padding-right: 15px;
float: right;
}
/*Make dropdown links appear inline*/
.mobile-menu ul {
position: static;
display: none;
}
/*Create vertical spacing*/
.mobile-menu li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
.mobile-menu ul li,
.mobile-menu li a {
width: 100%;
}
/*Display 'show menu' link*/
.mobile-menu .show-menu {
display: inherit;
color: #fff;
}
}
/* Test CSS END*/
}
}
#media screen and (min-width: 481px) {
/* comes into effect for screens larger than or equal to 481 pixels */
#pager {
width: 481px;
}
#media screen and (min-width: 916px) {
/* comes into effect for screens larger than or equal to 481 pixels */
#page {
min-width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Face Masks</title>
<nav class="mobile-menu"><img id="logo" style="float: left;" src="http://go.jsp.co.uk/images/eyemenu.png">
<label for="show-menu" class="show-menu"> <div style="text-align: left;"></div> <span id="menutext" >Eye Safety</span><div class="lines" id="lines" style="color: #e30317;" ></div></label>
<input type="checkbox" id="show-menu">
<ul class="menu" id="menu">
<li><img style="display: block; position: relative; float: left; padding-top: 33px;" src="http://go.jsp.co.uk/images/Headmini.png">Head Safety</li>
<li><img style="display: block; position: relative; float: left; padding-top: 33px;" src="http://go.jsp.co.uk/images/hearingmini.png">Hearing Safety</li>
<li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/FullHalfmini.png">Face Masks</li>
<li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/disposablemini.png">Disp. Masks</li>
<li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/eyemini.png">Eye Safety</li>
<li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/Contactmini.png">Contact</li>
</ul>
</nav>
</head>
<body>
<div style="padding-top: 113px">
<img src="http://go.jsp.co.uk/images/eye.png" style="width:100%; background-color: #253746" border="0" alt="Null">
</div>
</body>
</html>

jQuery is missing in your document (I get a Uncaught ReferenceError: $ is not defined when I run your snippet).
To add jQuery, add this line to your <head> section:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Thanks Guys its sorted the alignment out but just very bunched up in desktop browser not set to full width.

CSS issues none sense

I am trying to perfect my jQuery menu.
However I run on some CSS issues and I'm stuck. Here's my issues.
#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 ul {
opacity: 0;
height: 0px;
}
#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: #e74c3c;
color: #fff;
display: block;
list-style: disc;
}
#nav li:first-child {
border-top: 1px solid #fff;
}
#nav ul {
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;
}
.disp {
opacity: 1!important;
height:auto!important;
transition: height 100ms ease-in-out;
transition-delay: 300ms;
}
I run on some CSS issues and I'm stuck. Here's my issues.
I run on some CSS issues and I'm stuck. Here's my issues.

To sum it up:
To add paddings to links without icons, wrap all text inside items into <span> (only those that have no <span> yet) and add padding-left to spans that have no icon before them:
nav li span:first-child {
padding-left: 24px;
}
Display borders only for items that are last in the group:
nav li:not(:last-child) {
border-bottom: 1px solid #aaa;
}
The scrollbar appears because you have min-width rule specified. Do not do it. It will mess up small screens because it will never collapse. Also remove padding-right: 65px; and padding-right: 280px; - they are bogus.
Here's the final fiddle: https://jsfiddle.net/pjb7jzjk/36/
P. S. I suggest you to add overflow-y: scroll rule to .sidebar-nav to make it scrollable on screens with small height.

Ad.1 - try to add
#nav li > ul > li {
padding-left: 3em;
}

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!

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.

Script isn't creating span

This is the script I use to create span under the image to show a background image on hover
$(".gallery li a.image, .portfolio li a.image").append('<span class="image_hover"></span>'); //add span to images
$(".gallery li a.video, .portfolio li a.video").append('<span class="video_hover"></span>'); //add span to videos
$('.gallery li a span').css('opacity', '0').css('display', 'block') //span opacity = 0
// show / hide span on hover
$(".gallery li a, .portfolio li a").hover(
function () {
$(this).find('.image_hover, .video_hover').stop().fadeTo('slow', .7); },
function () {
$('.image_hover, .video_hover').stop().fadeOut('slow', 0);
});
This is the css code:
#gallery_prettyphoto.portfolio
{padding: 0 0 20px 0;
overflow: hidden;
}
#gallery_prettyphoto.portfolio ul li
{
display: inline-block;
height: 400px;
margin-bottom:35px;
}
#gallery_prettyphoto.portfolio ul li a img
{border: none; margin-top: 30px;}
/*#gallery_prettyphoto.portfolio:hover ul li a img {width: 120%;}*/
#gallery_prettyphoto.portfolio ul li h3 a
{text-decoration: none; text-align: center;}
#gallery_prettyphoto.portfolio ul li p
{margin: 10px 0 15px 0;}
#gallery_prettyphoto.portfolio ul li a.more-link
{-moz-border-radius: 3px; /* FF1-3.6 */
-webkit-border-radius: 3px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
border-radius: 3px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
border: 1px solid #2C2C2C;
background: #111111;
text-align: center;
padding: 3px 10px;
width: 80px;
display: block;
color: white;
text-decoration: none;}
#gallery_prettyphoto.portfolio ul li a.more-link:hover
{background: #222222;}
#gallery_prettyphoto.portfolio a span
{
z-index: 2000;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
cursor: pointer;
}
.portfolio .gallery_2columns a
{position: relative;
display: block;}
.portfolio .gallery_3columns a
{position: relative;
display: block;}
.portfolio .gallery_2columns a span.image_hover
{background: black url(images/gallery_hover/hover_image_big.png) no-repeat center center;
}
.portfolio .gallery_2columns a span.video_hover
{background: black url(images/gallery_hover/hover_video_big.png) no-repeat center center;
}
.portfolio .gallery_3columns a span.image_hover
{background: black url(images/gallery_hover/hover_image_medium.png) no-repeat center center;
}
.portfolio .gallery_3columns a span.video_hover
{background: black url(images/gallery_hover/hover_video_medium.png) no-repeat center center;
}
If there is no solution, can you guide me to creating similar effect on hover, like zoom the image, or opacity change.

try this
change this: $(".gallery li a.image, .portfolio li a.image").append('<span class="image_hover"></span>');
to this: $(".gallery li a.image, .portfolio li a.image").append("<span class='image_hover'></span>");