Develop Reference

Bouncing Slide Menu with Jquery

I'm new to Jquery and fairly new to HTML/CSS, but because I'm the type that learns through hands-on experience, I've been building a practice website while I learn new things, and have been experimenting with elements I'd like to eventually implement on a genuine site.
I've been trying to build a proper slide menu that activates when the cursor is hovered over the menu items. I've managed to get the menus to slide out, but if I move my cursor down into the slid-out menu, the whole thing starts bouncing! I've tried utilizing .stop() but then it flashes!
I've found questions on here and other sites from people with very similar (if not identical) issues, but I think I'm not understanding any of the answers that worked for them. I need visuals, and answers like "insert an if () {} statement" confuses me because I'm not sure where to put it. If I go by what my source material instructs me to do (put a check/if statement in the bottom function) it just seems to break the code and then the menus don't even slide out.
It has been very frustrating, and when I get too frustrated (like after six hours) I can't think as well about a solution, so if someone could help me find errors in my code or give me a fairly detailed explanation of what I could do to fix this bouncing problem, and how it started, I would really appreciate it.
I've attached the JQ, HTML, & CSS. Thanks in advance.
$(document).ready(function() {
$('.dropdown').hover(
function() {
$(this).children(".sub-menu").slideDown(200);
},
function() {
$(this).children(".sub-menu").slideUp(200);
}
);
});
nav {
background-color: #000000;
padding:10px 0;
text-align:center;
}
nav li {
margin: 10px;
padding: 0 10px;
display: inline;
}
nav ul {
list-style-type:none;
margin:0;
padding:0;
}
nav a {
font-size: 30px;
height: 35px;
line-height: 30px;
color: #ffffff;
text-decoration: none;
}
nav a:hover,
nav a:focus,
nav a:active {
color: #ff0000;
}
nav ul li {
display:inline-block;
position:relative;
}
nav li ul {
background-color:#000000;
position:absolute;
left:0;
top:50px;
width:200px;
}
nav li li a {
position:relative;
font-size:25px;
margin:0;
padding:0;
display:block;
}
ul.sub-menu {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li><b>Home</b></li>
<li>About</li>
<li>Inspiration</li>
<li class="dropdown">Find
<ul class="sub-menu">
<li>Ebooks</li>
<li>PDFs</li>
</ul>
</li>
<li>News</li>
<li class="dropdown">Contact Us
<ul class="sub-menu">
<li>E-mail List</li>
<li>Contact Us</li>
</ul>
</li>
<li class="dropdown">Extras
<ul class="sub-menu">
<li>Coming Soon</li>
</ul>
</li>
</ul>
</nav>

You have a space between your <li> elements and the dropdown menu (You can see it here).
Just remove / move it.
I did
nav {
[...]
// padding: 10px 0;
padding: 0;
}
nav li {
[...]
// padding: 0 10px;
padding: 10px;
}
$(document).ready(function() {
$('.dropdown').hover(
function() {
$(this).children(".sub-menu").slideDown(200);
},
function() {
$(this).children(".sub-menu").slideUp(200);
}
);
});
nav {
background-color: #000000;
padding: 0;
text-align:center;
}
nav li {
margin: 10px;
padding: 10px;
display: inline;
}
nav ul {
list-style-type:none;
margin:0;
padding:0;
}
nav a {
font-size: 30px;
height: 35px;
line-height: 30px;
color: #ffffff;
text-decoration: none;
}
nav a:hover,
nav a:focus,
nav a:active {
color: #ff0000;
}
nav ul li {
display:inline-block;
position:relative;
}
nav li ul {
background-color:#000000;
position:absolute;
left:0;
top:50px;
width:200px;
}
nav li li a {
position:relative;
font-size:25px;
margin:0;
padding:0;
display:block;
}
ul.sub-menu {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li><b>Home</b></li>
<li>About</li>
<li>Inspiration</li>
<li class="dropdown">Find
<ul class="sub-menu">
<li>Ebooks</li>
<li>PDFs</li>
</ul>
</li>
<li>News</li>
<li class="dropdown">Contact Us
<ul class="sub-menu">
<li>E-mail List</li>
<li>Contact Us</li>
</ul>
</li>
<li class="dropdown">Extras
<ul class="sub-menu">
<li>Coming Soon</li>
</ul>
</li>
</ul>
</nav>

Change css in nav li ul where top:50px to padding-top:23px
$(document).ready(function() {
$('.dropdown').hover(
function() {
$(this).children(".sub-menu").slideDown(200);
},
function() {
$(this).children(".sub-menu").slideUp(200);
}
);
});
nav {
background-color: #000000;
padding:10px 0;
text-align:center;
}
nav li {
margin: 10px;
padding: 0 10px;
display: inline;
}
nav ul {
list-style-type:none;
margin:0;
padding:0;
}
nav a {
font-size: 30px;
height: 35px;
line-height: 30px;
color: #ffffff;
text-decoration: none;
}
nav a:hover,
nav a:focus,
nav a:active {
color: #ff0000;
}
nav ul li {
display:inline-block;
position:relative;
}
nav li ul {
background-color:#000000;
position:absolute;
left:0;
padding-top:23px;
width:200px;
}
nav li li a {
position:relative;
font-size:25px;
margin:0;
padding:0`;
display:block;
}
ul.sub-menu {
display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li><b>Home</b></li>
<li>About</li>
<li>Inspiration</li>
<li class="dropdown">Find
<ul class="sub-menu">
<li>Ebooks</li>
<li>PDFs</li>
</ul>
</li>
<li>News</li>
<li class="dropdown">Contact Us
<ul class="sub-menu">
<li>E-mail List</li>
<li>Contact Us</li>
</ul>
</li>
<li class="dropdown">Extras
<ul class="sub-menu">
<li>Coming Soon</li>
</ul>
</li>
</ul>
</nav>

Moving The Tabs Link To The Right Hand Side Of The Blog

I would appreciate some help with an issue I've come across whilst coding my blogger blog - http://www.blankesque.com.
I would like the tabs / 'page' links to appear on the right hand side of the screen. I have managed to do this with the three dropdown menu tabs / 'pages' links however the tab link which doesn't have a dropdown menu - titled 'contact' - doesn't appear alongside the other elements on the right hand side of the screen.
I have tried to add the following piece of coding to resolve this issue:
#wctopdropnav li{
float : right;
}
However another issue comes to light if I use the above stated coding. Although the tab does indeed appear on the right side of the screen, but the text/links for the other three tabs' dropdown menu options then also appear on the right side, but I would ideally want them to stay on the left side. Below I have included the entire navigation bar coding.
<style>
#wctopdropcont { /* width of the main bar categories */
width:100%;
height:40px;
display:block;
padding: 0;
margin-left: -16px;
z-index:100;
top:0px;
left:0px;
position:fixed;
background:#ffffff;
opacity: 0.6;
filter: alpha(opacity=60);
}
#wctopdropnav{ /* social */
float: right;
width:900px;
height:7px;
display:block;
padding:0;
margin-left:30px;
}
#wctopdropnav ul{
float:right;
margin:0;
padding:0;
}
#wctopdropnav li{
float:left;
list-style:none;
line-height:35px;
margin:0;
padding:6.5px;/* height of the clicked bar */
background:#ffffff;
}
#wctopdropnav li a, #wctopdropnav li a:link{
color:#000000;
float:right;
display:block;
margin: 0px;
text-transform: uppercase;
font:11px cantarell!important;
padding: 5px;
text-decoration:none;
letter-spacing : 0.13em;
}
#wctopdropnav li a:hover, #wctopdropnav li a:active,
#wctopdropnav .current_page_item a {
color:black;
font-weight: bold;
padding: 5px;
background: white; /* Old browsers */
background: white;
background: white;
background: white;
background: white;
background: white;
background: white;
filter:black;
}
#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li a:visited{
font-size: 11px;
background:#ffffff;
color: #000000;
width: 100px;
margin: 0;
padding: 0px 1px;
line-height:20px;
position: relative;
}
#wctopdropnav li li a:hover, #wctopdropnav li li a:active {
color: black;
background: white;
background: white;
background: white;
background: white;
background: white;
background: white;
background: white;
filter: white;
}
#wctopdropnav li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:0px;
padding:0px
}
#wctopdropnav li:hover ul, #wctopdropnav li li:hover ul, #wctopdropnav li li li:hover ul, #wctopdropnav li.sfhover ul, #topwctopdropnav li li.sfhover ul, #topwctopdropnav li li li.sfhover ul{
left:auto
}
#wctopdropnav li:hover, #wctopdropnav li.sfhover{
position:static
}
</style>
<div id='wctopdropcont'>
<div id='wctopdropnav'>
<ul>
<li><a href='#'>Blankesque</a>
<ul>
<li><a href='http://www.blankesque.com'>Home</a></li>
<li><a href='http://www.blankesque.com/p/about-blankesque-blog.html'>About</a></li>
<li><a href='http://www.blankesque.com/p/disclaimer-policy_13.html'>Policies</a></li>
</ul></li>
<li><a href='#'>Social</a>
<ul>
<li><a href='http://www.pinterest.com/blankesque'>Pinterest</a></li>
<li><a href='http://www.twitter.com/itsblankesque.com'>Twitter</a></li>
<li><a href='http://www.bloglovin.com/people/aladyinwhite-8315551'>Bloglovin</a></li>
<li><a href='http://www.instagram.com/blankesque/blankesquexo'>Instagram</a></li>
</ul></li>
<li><a href='#'>Features</a>
<ul>
<li><a href='http://www.blankesque.com/search/label/Beauty'>Beauty</a></li>
<li><a href='http://www.blankesque.com/search/label/Creative'>Creative</a></li>
<li><a href='http://www.blankesque.com/search/label/Fashion'>Fashion</a></li>
<li><a href='http://www.blankesque.com/search/label/Favourites'>Favourites</a></li>
<li><a href='http://www.blankesque.com/search/label/Fragrance'>Fragrance</a></li>
<li><a href='http://www.blankesque.com/search/label/Hair'>Hair</a></li>
<li><a href='http://www.blankesque.com/search/label/Haul'>Haul</a></li>
<li><a href='http://www.blankesque.com/search/label/Life'>Life</a></li>
<li><a href='http://www.blankesque.com/search/label/Skincare'>Skincare</a></li>
</ul>
</li></ul>
<li><a href='#'>Contact</a></li>
</div>
</div>
I have tried various different methods but to no avail, if anyone can aid me in solving this issue then I'd be extremely grateful.
Thank you in advance,
Iram

You should start by putting the li for contact inside of your ul like this:
<div id="wctopdropnav">
<ul>
<li>Blankesque
<ul>
<li>Home</li>
<li>About</li>
<li>Policies</li>
</ul></li>
<li>Social
<ul>
<li>Pinterest</li>
<li>Twitter</li>
<li>Bloglovin</li>
<li>Instagram</li>
</ul></li>
<li>Features
<ul>
<li>Beauty</li>
<li>Creative</li>
<li>Fashion</li>
<li>Favourites</li>
<li>Fragrance</li>
<li>Hair</li>
<li>Haul</li>
<li>Life</li>
<li>Skincare</li>
</ul>
</li>
<li>Contact</li><!-- RIGHT HERE -->
</ul>
</div>
See example: https://jsfiddle.net/pyexm7us/

Drop down doesn't show up unless i change Nav height

So I finally got my dropdown to work however unless i change the nav height here it won't show up:
header nav {
width:100%;
height:auto;
background:url(../images/menu-bg.jpg) 0 0 no-repeat;
overflow:hidden;
position:relative;
z-index:1;
}
I've been playing with the Z value, but I'm not 100% sure how it works or if i missed something. If i change the nav height to like 150px it works fine, but then there is a huge gap when the dropdown isn't there.
HTML CODE:
<header>
<div class="main">
<div class="wrapper">
<h1>KB Customs</h1>
<div class="fright">
<div class="indent"> <span class="address">Walker, MI 49544</span> <span class="phone">Tel: 616-901-1174</span> </div>
</div>
</div>
<nav>
<ul class="menu">
<li>Home</li>
<li><a class="active" href="about.html">About Us</a></li>
<li>Products
<ul class="dropdown">
<li>
Products
</li>
</ul>
</li>
<li>Gallery</li>
<li>FAQ & Prices</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</header>
CSS CODE:
/***** menu *****/
header nav {
width:100%;
height:auto;
background:url(../images/menu-bg.jpg) 0 0 no-repeat;
overflow:hidden;
position:relative;
z-index:1;
}
#page1 header nav {
margin-bottom:28px;
}
.menu li {
float:left;
position:relative;
background:url(../images/menu-spacer.gif) left top no-repeat;
z-index: 2;
}
.menu > li:first-child {
background:none;
}
.menu li a {
display:inline-block;
font-size:18px;
line-height:25px;
padding:12px 28px 12px 29px;
color:#808080;
text-transform:capitalize;
}
.menu > li:first-child > a {
text-indent:-999em;
background:url(../images/menu-home.png) center -25px no-repeat;
min-width:22px;
}
.menu li a.active, .menu > li > a:hover {
color:#fff;
}
.menu > li:first-child > a.active, .menu > li:first-child > a:hover {
background-position:center 15px;
}
ul li ul.dropdown{
min-width:inherit; /* Set width of the dropdown */
background:url(../images/menu-bg.jpg) 0 0 no-repeat;
display: none;
position: absolute;
z-index: 3;
left: 0;
}
ul li:hover ul.dropdown{
display: block; /* Display the dropdown */
color:#fff;
z-index: 3;
}
ul li ul.dropdown li{
display: block;
z-index: 3;
}
ul li ul.dropdown:hover li a{
color:#fff;
z-index: 3;
}

css + html menu hitbox

I wrote some code using different internet sources. I ran into a problem -
every object that's in the bottom part of the menu cannot be interacted with.
The menu interferes with everything below where the dropdown falls.
<style>
body {
padding: 0;
margin: 0;
font-family: Arial;
font-size: 23px;
}
#nav {
background-color:1a1a1a;
opacity: 0.9;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: right;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a, visited {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 0px solid #222;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #699;
}
.left-to-right {
text-align: left;
}
</style>
<html lang="he">
<body dir-"rtl"><div id="nav">
<div id="nav_wrapper">
<div>
<ul <ul dir="RTL">
<li> תרמילים
<ul class="left-to-right">
<!-- <li class="backpacks" id="firstlight-20l"> FirstLight 20L </li>
<li class="backpacks" id="firstlight-30l"> FirstLight 30L </li>
<li class="backpacks" id="firstlight-40l"> FirstLight 40L </li>-->
<li class="backpacks"> rotation180° Professional 38L Deluxe </li>
<li class="backpacks"> rotation180° Horizon 34L </li>
<li class="backpacks"> rotation180° Panorama 22L </li>
<!-- <li class="backpacks" id="rotation180-travel-away"> rotation180° Travel Away 22L </li>-->
<li class="backpacks" id="rotation180-trail"> rotation180° Trail 16L </li>
</ul>
</li>
<li> תיקי מצלמות ספורט
<ul class="left-to-right">
<li>GP 1 kit case
</li>
<li>GP 2 kit case
</li>
</ul>
</li>
<li> אביזרים
<ul class="left-to-right">
<li>r180º Panorama/Horizon Photo Insert
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

#nav_wrapper ul ul li{ text-align:left;}
you need to add this only: demo

You might be able to use vertical-align for the list elements & text-align for the links.

Just add a class to the <ul> tag of each dropdown and add text-align: left to it.
FIDDLE Here

jQuery - Change vertical menu to horizontal

I'm trying to use the Tendina jQuery Plugin. It works great, but I'd like the menus to be laid out horizontally, like this:
I've been messing around with the CSS ( inline-block and other stuff ) but haven't been able to make it work.
I'm not gonna post the JS because it's a whole lot of code... I think too much to paste here, but feel free to check the JSFiddle.
Any help would be highly appreciated.
Thanks.
HTML
<ul class="dropdown">
<li>
Menu 1
<ul>
<li>Submenu 1</li>
</ul>
</li>
<li>
Menu 2
<ul>
<li>Submenu 2</li>
<li>Submenu 2</li>
<li>Submenu w/ children
<ul>
<li>Subsubmenu 2</li>
<li>Subsubmenu 2</li>
</ul>
</li>
</ul>
</li>
<li>
Menu 3
<ul>
<li>Submenu 3</li>
<li>Submenu 3</li>
</ul>
</li>
</ul>
CSS
.dropdown {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: #f7f7f7;
font-family: Arial, Helvetica, sans-serif;
padding-top: 20px;
font-size: 12px;
}
.dropdown li {
padding: 0 10px;
}
.dropdown li.selected {
background-color: #f2f2f2;
}
.dropdown li a {
display: block;
width: 100%;
padding: 10px;
text-decoration: none;
text-transform: uppercase;
color: black;
}
.dropdown li > ul li {
padding: 0 20px;
}
.dropdown li > ul li a {
color: gray;
}
.dropdown li > ul li > ul li {
padding: 10px 30px;
}

Here's an updated version of your fiddle
.dropdown
{
position:absolute;
left:0;
top:0;
height:100%;
width:100%;
background-color:#f7f7f7;
font-family:Arial,Helvetica,sans-serif;
padding-top:20px;
font-size:12px
}
.dropdown li
{
padding:0 10px;
display:inline-block;
width:auto
}
.dropdown li.selected
{
background-color:#f2f2f2
}
.dropdown li a
{
display:block;
width:100%;
padding:10px;
text-decoration:none;
text-transform:uppercase;
color:#000
}
.dropdown ul
{
position:absolute
}
.dropdown li > ul li
{
padding:10px 0;
}
.dropdown li > ul li a
{
color:gray
}
.dropdown li > ul li > ul li
{
padding:10px 30px
}
}