We Keep Coding

Need to make sub menu full width of screen

Using css how I can make a sub-menu start from the left side of the screen instead of starting it from under the parent item.
nav {
margin: 0 auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
}
nav ul li:hover a {
color: #000000;
margin-bottom:5px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
nav ul li a {
display: block;
padding: 5px 15px;
color: #000000;
text-decoration: none;
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
color: #000000;
}
nav ul ul li a:hover {
color: #666666;
}
nav ul ul ul {
position: absolute;
top:0;
}
<nav>
<ul>
<li>
Contacts
<ul>
<li>Add Contact</li>
<li>View Contacts</li>
</ul>
</li>
<li>
Tickets
<ul>
<li>New Ticket</li>
<li>View Tickets</li>
</ul>
</li>
<li>Invoices</li>
<li>Itemised Calls</li>
</ul>
</nav>
here is a jsfiddle: http://jsfiddle.net/jhmkqrye/1/ - hope it helps
When you hover on Tickets it's sub-menu starts from below the Ticket which I want to start below the Contacts from the start of screen width to end of screen width.

you can try to set the parent position for relative and child's to absolute and then set the position using left, right, bottom, top
for example left: 0; would put your child item on the very left
edit: is jsfiddle correct? 'cause i can't seem to find any sub-menu on hover, and on click it throws 404

3rd Level JQuery Dropdown Not Displaying

Trying to get 3 level dropdown working. In Opencart I have been using a third party repsonsive menu which works great. Demonstrated and available here http://cssmenumaker.com/menu/responsive-flat-menu
However, Opencart doesn't support 3 level categories so an addon is needed https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=19296
the 3rd levels categories are loaded but no displaying. Can anyone help get the thrid category and two systems merged and displaying over 1000px and even loading too with a + symbol?
Here is the dropdown menu in action at Plunkr https://plnkr.co/edit/hZG4pbVCXQupf2kgqoKF?p=preview
<div id="cssmenu"><div id="menu-button">Menu</div>
<ul>
<li class="has-sub"><span class="submenu-button"></span>Extractor Fans
<ul style="">
<li><a class="arrow" href="/bathroom-extractor-fans">Bathroom Shower</a>
<div class="has-sub"><span class="submenu-button"></span>
<ul>
<li>Designer Videos</li>
</ul>
</div>
</li>
<li> Bathroom Cabinets</li>
</ul>
</li>
</ul>
</div>

Here's my version, without changing your html and js. All of the changes are strictly within css. Most of the fix lied in getting rid of the following:
#cssmenu ul ul ul {
margin-left: 100%;
}
#cssmenu ul ul {
left: -9999px;
}
https://plnkr.co/edit/x4Lbw9AepcdIhkzBoAPM?p=preview

I could not understand your question properly but from what I understood I have a created a two level dropdown using jQuery. 'div' tag is used inside the 'li' tag so the HTML has to be structured just a little more.
$(document).ready(function() {
$("#first li").children('ul').hide();
$("#first li").hover(
function() {
$(this).children('ul').hide();
$(this).children('ul').slideDown('fast');
},
function() {
$('ul', this).slideUp('slow');
});
$("#second li").hover(
function() {
$(this).children('ul').hide();
$(this).children('ul').slideDown('fast');
},
function() {
$('ul', this).slideUp('slow');
});
});
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
line-height: 1;
position: relative;
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
border: 0;
}
#cssmenu:after,
#cssmenu > ul:after {
line-height: 0;
display: block;
clear: both;
height: 0;
content: '.';
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
font-family: Arial, Helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
border-radius: none;
background: #515151;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li > a {
font-size: 12px;
font-weight: bold;
padding: 10px 6px;
text-decoration: none;
letter-spacing: 1px;
text-transform: none;
color: #fff;
}
#first ul li a {
background-color: white;
font-size: 12px;
font-weight: bold;
padding: 10px 6px;
text-decoration: none;
letter-spacing: 1px;
text-transform: none;
color: black;
margin-left: 20px;
}
#first ul ul li a {
position: relative;
left: 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="cssmenu">
<div id="menu-button">Menu</div>
<ul id="first">
<li class="has-sub">Extractor Fans
<ul id="second">
<li>
<div>
<a class="arrow has-2nd-sub" href="#">Bathroom Shower</a>
</div>
<ul id="third">
<li class="has-3rd-sub">
<div>Designer Videos</div>
<div class="has-sub"><span class="submenu-button"></span>
</div>
</li>
</ul>
</li>
<li> Bathroom Cabinets
</li>
</ul>
</li>
</ul>
</div>

You shouldn't use a div inside the <li> element.
So it seems to work like this:
<div id="cssmenu">
<div id="menu-button">Menu</div>
<ul>
<li class="has-sub"><span class="submenu-button"></span>Extractor Fans
<ul style="">
<li><a class="arrow" href="/bathroom-extractor-fans">Bathroom Shower</a>
<ul class="has-sub submenu-button">
<li>Designer Videos</li>
</ul>
</li>
<li> Bathroom Cabinets
</li>
</ul>
</li>
</ul>
</div>
See https://plnkr.co/edit/Xc0jSmZd3Qa0koklgUBG?p=preview

Just change in css and you get the result what you have:
/* Line no 575*/
#cssmenu > ul > li > ul > li > div {
left: -100%;
top: 0px;
}
/* Line no 171*/
#cssmenu ul ul ul {
top: 0;
left: 0;
}
Check the link: https://plnkr.co/edit/qqqYbmwftggcggzvgjAQ?p=preview

Click function doesn't work in my JQuery

$(document).ready(function(){
$("#menu-trigger").click(function(){
$("#menu").slideToggle();
});
});
#menu {
width: 100%;
height: 35px;
}
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
background: blue;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 10px 0 0;
position: relative;
background:blue;
}
ul.topnav li a {
color:red;
padding: 10px 5px;
float: left;
display:block;
font-size: 12px;
text-transform: uppercase;
font-style: normal;
}
ul.topnav li a:visited, ul.topnav li a:active, ul.topnav li a:link {
color: #fff;
text-decoration: none;
}
ul.topnav li a:hover {
background: violet;
color:white;
}
ul.subnav{
display:none;
position:absolute;
top:100%;
padding:0;
}
ul.subnav li{
list-style: none;
float:left;
width:100%;
}
ul.subnav a{
line-height:120%;
padding:10px 15px;
}
ul.topnav li:hover>ul.subnav{
display:block
}
#menu-trigger{
display:none;
}
#media screen and (max-width:600px){
#menu{
display:none;
}
#menu-trigger{
display:block;
}
ul.topnav li{
float:none;
}
ul.topnav li a{
float:none;
border-bottom:2px solid red;
}
}
<span id="menu-trigger">MENU</span>
<div id="menu">
<ul class="topnav">
<li><a>Home</a>
</li>
<li><a>About Us</a>
<ul class="subnav">
<li><a>Introduction</a>
</li>
<li><a>History</a>
</li>
<li><a>Mission/Vision Statement</a>
</li>
</ul>
</li>
<li><a>Basic Education</a>
<ul class="subnav">
<li><a>Introduction</a>
</li>
<li><a>The Basic Ed</a>
</li>
<li><a>About Basic Ed</a>
</li>
</ul>
</li>
<li><a>IB</a>
</li>
<li><a>College</a>
</li>
<li><a>Contact Us</a>
</li>
</ul>
</div>
I can't find what seems to be the problem in my code specifically in jQuery. The click and slideToggle event wont work. What I want is when the screen reach its max-width, horizontal menu will no longer show, instead when you click on MENU slide-up and down will toggle resulting in vertical and mobile friendly navigation menu. I simply followed some tutorials in Youtube but it doesn't work on me.

Try this:
$(document).ready(function(){
$("#menu-trigger").on('click', function(){
$("#menu").slideToggle();
});
});
here you can take a look how it's working when you click on the #menu-trigger link

Drop Down Menu Similar to xenForo?

How can I create a dropdown menu similar to xenforo, which will automatically close after 2 seconds?
I've tried searching but unfortunately couldn't find any proper solution.
But I don't know how to and what code to put to achieve like; 1. The drop down menu open after 2 seconds if the mouse cursor hovers over the main menu link for 2 seconds. 2. The drop down closes if the mouse cursor is away from the drop down for 2 seconds.
Thanks!
Here is Jsfiddle;

Try this:
$(document).ready(function(){
$("#sub-menu li").hide(); // Hide in order to fadeIn to work
$("#main-menu ul").hover(
function(){
$("#sub-menu li").fadeIn(slow);
},
function(){
$("#sub-menu li").fadeOut(slow);
});
});

You can use jquery to use this functionality. Instead of waiting for 2 seconds you can use fade out slow so that users can know something will happen.
$(document).ready(function(){
$("#sub-menu").hide(); // Hide in order to fadeIn to work
$("#main-menu").hover(
function(){
$("#sub-menu").fadeIn(slow);
},
function(){
$("#sub-menu").fadeOut(slow);
});
});

<html>
<head>
<style>
.dd_menu {
background: none;
padding: 0px;
margin:0;
list-style-type:none;
height:10px;
border: none;
font-size: 11px;
font-family: "Candarab";
}
.dd_menu li {
background: none;
float: left !important;
height:20px;
margin-left: 1px;
margin-top: 4px;
}
.dd_menu li a {
padding: 15px 5px;
display:inline;
color:#000;
text-decoration:none;
font:11px arial, verdana, sans-serif;
}
.dd_menu li:hover a {
text-decoration:none;
padding: 15px 5px;
}
.dd_menu ul {
position:absolute;
left:-9999px;
top:9px;
list-style-type:none;
text-decoration: none;
float: left !important;
}
.dd_menu li:hover {
position:relative;
background:#176093;
text-decoration: none;
z-index: 1000;
}
.dd_menu li:hover ul {
left:0px;
top:20px;
background:lavender;
padding: 3px 3px;
border:1px solid grey;
width:160px;
text-decoration: none;
}
.dd_menu li:hover ul li {
height:18px;
border:none;
}
.dd_menu li:hover ul li a {
height:18px;
padding:0px;
display:block;
font-size:11px;
width:158px;
line-height:18px;
text-indent:5px;
color:#444;
background-color:lavender;
text-decoration:none;
border:1px solid transparent;
}
.dd_menu li:hover ul li a:hover {
height:18px;
background:silver;
color:#000;
float: left;
border:solid 1px #444;
}
</style>
</head>
<body>
<ul class="dd_menu">
<li>Main Menu <span class="smallesttext">▼</span>
<ul>
<div align="left">
<li>Drop Down Link</li>
<li>Drop Down Link</li>
<li>Drop Down Link</li>
<li>Drop Down Link</li>
<li>Drop Down Link</li>
</div>
</ul>
</li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".dd_menu li a").hover(
function(){
$(".dd_menu li ul div li a").hide().fadeIn('slow');
},
function(){
});
$("ul div li").hover(
function(){
$(".dd_menu li ul div li a").show();
},
function(){
;
});
});
</script>
</body>
</html>
Try this. Similarly add what you want on mouse out. If it helped think about accepting the answer.

jQuery Menu Button Disappearing on drop down in webkit only, how do I make it stay put?

I have a problem involving jQuery drop downs. Basically the button which reveals the drop down dissapears upon revealing the drop down. Here is the code
The HTML included in the navigation
<div id="header">
<div id="navHolder">
<ul style="list-style: none;">
<li>Travel Blog</li>
<ul class="dropdown">
<li>Destination
<ul class="sub_menu">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</li>
</ul>
<li>Map</li>
<li>About</li>
</ul>
</div>
This is the javascript generating the drop down effect
$(function(){
var config = {
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
interval: 200, // number = milliseconds for onMouseOver polling interval
over: doOpen, // function = onMouseOver callback (REQUIRED)
timeout: 200, // number = milliseconds delay before onMouseOut
out: doClose // function = onMouseOut callback (REQUIRED)
};
function doOpen() {
$(this).addClass("hover");
$('ul:first',this).css('visibility', 'visible');
}
function doClose() {
$(this).removeClass("hover");
$('ul:first',this).css('visibility', 'hidden');
}
$("ul.dropdown li").hoverIntent(config);
$("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
});
And this is the CSS styling the buttons and drop down...
ul.dropdown { position: relative; list-style: none;}
ul.dropdown li { font-weight: bold; list-style: none; zoom: 1;}
ul.dropdown a:hover { color: #CCC; }
ul.dropdown a:active { color: #FFF; }
ul.dropdown li a { display: block; color: #FFF;}
ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover { color: #CCC; position: relative; }
ul.dropdown li.hover a { color: #FFF; text-decoration: none;}
ul.dropdown ul { width: 180px; background: url(images/transBlack_bg2.png) repeat; -moz-border-radius: 5px; -webkit-border-radius: 5px; visibility: hidden; position: absolute; top: 45px; right: 60px; }
ul.dropdown ul li { font-weight: bold; font-size: 13px; color: #FFF; padding: 5px;}
ul.dropdown ul li a { width: auto; display: inline-block; }
ul.dropdown ul li a:hover { color: #111;}
ul.dropdown ul ul { left: 100%; top: 0; }
ul.dropdown li:hover > ul { visibility: visible; }
Any advice or answers will be greatly appreciated, thanks very much for your time :)

The problem is you are using the pseudo hover class incorrectly. This link specifies how to use them properly. Your problem is this (from link): Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!! So your hover style is not behaving correctly. If you add these lines (adjusting as desired):
ul.dropdown li.hover a:link {color:#999}
ul.dropdown li.hover a:visited {color:#999}
before this line:
ul.dropdown li.hover a { color: #FFF; text-decoration: none;}
it will work as expected.
Edit: Also, using a class named hover along with the hover pseudo class makes the css pretty hard to decipher. I'd give the class you create a different name if possible.