Develop Reference

Cannot create a vertical menu

I'm trying to create a vertical menu but the final result looks like this:
this is my code:
$("#example-one").append("<li id='magic-line'></li>");
/* Cache it */
var $magicLine = $("#magic-line");
$magicLine
.width($(".current_page_item").width())
.css("left", $(".current_page_item a").position().left)
.data("origLeft", $magicLine.position().left)
.data("origWidth", $magicLine.width());
$("#example-one li")
.find("a")
.hover(
function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
$magicLine.stop().animate({
left: leftPos,
width: newWidth
});
},
function() {
$magicLine.stop().animate({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
}
);
.nav-wrap {
margin: 50px auto;
background-color: rgba(0, 0, 0, 0.6);
border-top: 2px solid white;
border-bottom: 2px solid white;
}
/* Clearfix */
.group:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
*:first-child+html .group {
zoom: 1;
}
/* IE7 */
/* Example One */
#example-one {
margin: 0 auto;
list-style: none;
position: relative;
width: 200px;
}
#example-one li {
display: inline-block;
}
#example-one a {
color: #bbb;
font-size: 14px;
float: left;
padding: 6px 10px 4px 10px;
text-decoration: none;
text-transform: uppercase;
}
#example-one a:hover {
color: white;
}
#magic-line {
position: absolute;
bottom: -2px;
left: 0;
width: 100px;
height: 2px;
background: #fe4902;
}
.current_page_item a {
color: white !important;
}
.ie6 #example-one li,
.ie7 #example-one li {
display: inline;
}
.ie6 #magic-line {
bottom: -3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<ul class="group" id="example-one">
<li class="current_page_item" data-target="home" data-posmenu="-35px">hello</li>
<li class="" data-target="about">About</li>
<li class="" data-target="product">PRODUCTS</li>
<li class="" data-target="news">News</li>
<li class="" data-target="contact">Contact</li>
<li class="" data-target="policy_privacy">Privacy</li>
</ul>
</div>
Essentially I would like to have all the items as a vertical menu like this: https://www.w3schools.com/howto/howto_css_vertical_menu.asp
I tried to add a specific width but I get the same result
How can I achieve that?

Please replace your CSS code with these lines.
.nav-wrap {
margin: 50px auto;
background-color: rgba(0, 0, 0, 0.6);
border-top: 2px solid white;
border-bottom: 2px solid white;
}
/* Clearfix */
.group:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
*:first-child+html .group {
zoom: 1;
}
/* IE7 */
/* Example One */
#example-one {
list-style: none;
position: relative;
display: grid;
max-width: 200px;
background: #F1F1F1;
padding: 0px;
}
#example-one li {
display: inline-block;
}
#example-one a {
color: #000;
font-family: sans-serif;
font-size: 14px;
width: 100%;
float: left;
padding: 11px;
text-decoration: none;
text-transform: capitalize;
}
#example-one a:hover {
color: #818181;
}
#magic-line {
position: absolute;
bottom: -2px;
left: 0;
width: 100px;
height: 2px;
background: #fe4902;
}
.current_page_item {
background: #4CAF50;
}
.current_page_item a {
color:white;
}
<div class="menu">
<ul class="group" id="example-one">
<li class="current_page_item" data-target="home" data-posmenu="-35px">hello</li>
<li class="" data-target="about">About</li>
<li class="" data-target="product">PRODUCTS</li>
<li class="" data-target="news">News</li>
<li class="" data-target="contact">Contact</li>
<li class="" data-target="policy_privacy">Privacy</li>
</ul>
</div>

You are using float and display: inline-block. Just remove those properties.
.nav-wrap {
margin: 50px auto;
background-color: rgba(0, 0, 0, 0.6);
border-top: 2px solid white;
border-bottom: 2px solid white;
}
/* Clearfix */
.group:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
*:first-child+html .group {
zoom: 1;
}
/* IE7 */
/* Example One */
#example-one {
margin: 0 auto;
list-style: none;
position: relative;
width: 200px;
}
#example-one a {
color: #bbb;
font-size: 14px;
padding: 6px 10px 4px 10px;
text-decoration: none;
text-transform: uppercase;
}
#example-one a:hover {
color: white;
}
#magic-line {
position: absolute;
bottom: -2px;
left: 0;
width: 100px;
height: 2px;
background: #fe4902;
}
.current_page_item a {
color: white !important;
}
.ie6 #magic-line {
bottom: -3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<ul class="group" id="example-one">
<li class="current_page_item" data-target="home" data-posmenu="-35px">hello</li>
<li class="" data-target="about">About</li>
<li class="" data-target="product">PRODUCTS</li>
<li class="" data-target="news">News</li>
<li class="" data-target="contact">Contact</li>
<li class="" data-target="policy_privacy">Privacy</li>
</ul>
</div>
But this is actually all you need. The rest is unnecessary:
#example-one {
margin: 0 auto;
align-self: center;
list-style: none;
position: relative;
}
#example-one a {
color: #bbb;
font-size: 14px;
text-decoration: none;
text-transform: uppercase;
}
#example-one li {
padding: 6px 10px 4px 10px;
}
#example-one a:hover {
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<ul class="group" id="example-one">
<li class="current_page_item" data-target="home" data-posmenu="-35px">hello</li>
<li class="" data-target="about">About</li>
<li class="" data-target="product">PRODUCTS</li>
<li class="" data-target="news">News</li>
<li class="" data-target="contact">Contact</li>
<li class="" data-target="policy_privacy">Privacy</li>
</ul>
</div>
I would also rework your orange line. You don't need JS/jQuery for this. Just use CSS.

showing sub menu always when clicked on it

I have a problem with side navigation bar. When i clicked on sub menu link menu goes hide. But I want to open always when i clicked on sub menu link. It goes hide when main menu clicked.
My code below:
$(document).ready(function() {
$('#menu li > a').click(function(e) {
$(this).addClass("selected");
if ($(this).next('ul').length > 0) {
e.preventDefault();
var subNav = $(this).next('ul');
if (subNav.is(':visible')) {
subNav.slideUp('normal')
} else {
$('#menu ul:visible').slideUp('normal');
subNav.slideDown('normal');
$("a.selected").removeClass("selected");
$(this).addClass("selected");
}
}
});
$('.nav-trigger').click(function() {
$('.side-nav').addClass('visible');
});
});
.side-nav.visible {
display: block;
}
.side-nav {
position: absolute;
width: 100%;
height: 100%;
background-color: #2e3e4e;
z-index: 99;
display: none;
overflow-y: auto;
}
.side-nav #menu {
margin: 0;
padding: 0;
}
.side-nav #menu ul {
display: none
}
.side-nav #menu,
.side-nav #menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.side-nav #menu>li {
background-color: #2e3e4e;
list-style: none;
position: relative;
}
.side-nav #menu>li>a {
padding: 16px 16px;
border-bottom: 1px solid #3A4B5C;
width: 100%;
display: block;
text-decoration: none;
color: #f2f2f2;
font-size: 1.2em;
}
.side-nav #menu li a:hover {
color: #ccc;
text-decoration: none;
}
.side-nav #menu li ul li a {
background-color: #384858;
color: #fff;
width: 100%;
display: block;
padding: 16px 16px;
border-bottom: 1px solid #2e3e4e;
text-decoration: none;
}
.side-nav #menu li ul li a:hover {
color: #2addd4;
text-decoration: none;
background-color: #2e3e4e;
}
.side-nav #menu li ul li a::before {
display: inline-block;
cursor: pointer;
width: 10px;
height: 10px;
content: "\f0da";
font-family: FontAwesome;
left: 0px;
position: relative;
top: 0;
background-color: transparent;
}
.side-nav #menu li ul li a:hover::before {
display: inline-block;
cursor: pointer;
width: 10px;
height: 10px;
content: "\f0da";
font-family: FontAwesome;
left: 0px;
position: relative;
top: 0;
background-color: transparent;
}
.selected {
z-index: 9999;
border-left: 2px;
}
.side-nav ul li a:hover:after {
content: '';
position: absolute;
width: 4px;
height: 100%;
top: 0;
left: 0;
background-color: #2addd4;
}
.side-nav ul li a.selected:after {
content: '';
position: absolute;
width: 4px;
height: 100%;
top: 0;
left: 0;
background-color: #2addd4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="side-nav">
<nav>
<ul id="menu">
<li>
<span><i class="fa fa-dashboard"></i></span> <span>Dashboard</span>
<ul>
<li>page1</li>
</ul>
</li>
<li>
<span><i class="fa fa-user"></i></span> <span>User Page</span>
</li>
<li>
<span><i class="fa fa-user"></i></span> <span>Admin Page</span>
<ul>
<li>adminpage 1</li>
<li>adminpage 2</li>
</ul>
</li>
</ul>
</nav>
</div>

JavaScript + CSS Single Collapsible Vertical Menu

Everybody, I have been learning and trying to make a collapsible vertical menu using JavaScript and CSS.
What should I do so that when I expand both menus and I click again on user 1, the user 2 will be hidden?
Here's the coding:
body {
background:#ffffff;
margin: 0 auto;
}
#nav{
width: 200px;
padding: 0;
margin-bottom: 0px;
font-size: 10px;
font-family: Verdana;
color: #999999;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#nav li {
border-bottom: 1px solid #fff;
margin: 0;
width: auto;
}
li ul {
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
position: relative;
display:none;
}
ul li a {
display:block;
text-decoration: none;
color: #000000;
background: #8CDD81;
line-height:2em;
height:2em;
padding:2px 2px
}
li li a {
background:#D7DBDD
}
li:hover li a, li.over li a {
background-color: #D7DBDD;
}
li a:hover,
li:hover a, li.over a,
li:hover li a:hover, li.over li a:hover {
color: #000000;
background-color: #F4D03F ;
}
header {
font-family: 'Lobster', cursive;
text-align: center;
font-size: 25px;
}
#info {
font-size: 18px;
color: #555;
text-align: center;
margin-bottom: 25px;
}
a{
color: #074E8C;
}
.scrollbar {
margin-left: 30px;
float: left;
height: 200px;
width: 210px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow {
min-height: 450px;
}
#wrapper {
text-align: center;
width: 500px;
margin: auto;
}
/*
* STYLE 4
*/
#style-4::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar
{
width: 10px;
background-color: #cccccc;
}
#style-4::-webkit-scrollbar-thumb
{
background-color: #9fa6ad;
border: 2px solid #9fa6ad;
}
li ul li {}
li.on ul {
display:block
}
li.off ul {
display:none
}
<script type="text/javascript">
<!--//--><![CDATA[//><!--
startList = function() {
if (document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onclick=function() {
this.className = (this.className == "on") ? "off" : "on";
}
}
}
}
}
window.onload=startList;
//--><!]]>
</script>
<body>
<id="wrapper">
<div class="scrollbar" id="style-4" class="force-overflow">
<ul id="nav">
<li><strong>MENU</strong></li>
<li><strong>User 1 ></strong>
<ul>
<li>Name </li>
<li>Age</li>
</ul>
</li>
<li><strong>User 2 ></strong>
<ul>
<li>Name</li>
<li>Age</li>
</ul>
</li>
</div>
</div>
</ul>
</body>

off previously selected li by removing on class from other element
if(document.getElementsByClassName("on").length>0)
document.getElementsByClassName("on")[0].className = "off";
body {
background: #ffffff;
margin: 0 auto;
}
#nav {
width: 200px;
padding: 0;
margin-bottom: 0px;
font-size: 10px;
font-family: Verdana;
color: #999999;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#nav li {
border-bottom: 1px solid #fff;
margin: 0;
width: auto;
}
li ul {
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
position: relative;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #000000;
background: #8CDD81;
line-height: 2em;
height: 2em;
padding: 2px 2px
}
li li a {
background: #D7DBDD
}
li:hover li a,
li.over li a {
background-color: #D7DBDD;
}
li a:hover,
li:hover a,
li.over a,
li:hover li a:hover,
li.over li a:hover {
color: #000000;
background-color: #F4D03F;
}
header {
font-family: 'Lobster', cursive;
text-align: center;
font-size: 25px;
}
#info {
font-size: 18px;
color: #555;
text-align: center;
margin-bottom: 25px;
}
a {
color: #074E8C;
}
.scrollbar {
margin-left: 30px;
float: left;
height: 200px;
width: 210px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow {
min-height: 450px;
}
#wrapper {
text-align: center;
width: 500px;
margin: auto;
}
/*
* STYLE 4
*/
#style-4::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar {
width: 10px;
background-color: #cccccc;
}
#style-4::-webkit-scrollbar-thumb {
background-color: #9fa6ad;
border: 2px solid #9fa6ad;
}
li ul li {} li.on ul {
display: block
}
li.off ul {
display: none
}
<script type="text/javascript">
<!--//--><![CDATA[//><!--
startList = function() {
if (document.getElementById) {
navRoot = document.getElementById("nav");
for (i = 0; i < navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName == "LI") {
node.onclick = function() {
if(document.getElementsByClassName("on").length>0)
document.getElementsByClassName("on")[0].className = "off";
this.className = (this.className == "on") ? "off" : "on";
}
}
}
}
}
window.onload = startList;
//--><!]]>
</script>
<body>
<id="wrapper">
<div class="scrollbar" id="style-4" class="force-overflow">
<ul id="nav">
<li><strong>MENU</strong>
</li>
<li><strong>User 1 ></strong>
<ul>
<li>Name
</li>
<li>Age
</li>
</ul>
</li>
<li><strong>User 2 ></strong>
<ul>
<li>Name
</li>
<li>Age
</li>
</ul>
</li>
</div>
</div>
</ul>
</body>

You can use jQuery to reduce your coding efforts.
Following is the only code you need.
body {
background: #ffffff;
margin: 0 auto;
}
#nav {
width: 200px;
padding: 0;
margin-bottom: 0px;
font-size: 10px;
font-family: Verdana;
color: #999999;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#nav li {
border-bottom: 1px solid #fff;
margin: 0;
width: auto;
}
li ul {
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
position: relative;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #000000;
background: #8CDD81;
line-height: 2em;
height: 2em;
padding: 2px 2px
}
li li a {
background: #D7DBDD
}
li:hover li a,
li.over li a {
background-color: #D7DBDD;
}
li a:hover,
li:hover a,
li.over a,
li:hover li a:hover,
li.over li a:hover {
color: #000000;
background-color: #F4D03F;
}
header {
font-family: 'Lobster', cursive;
text-align: center;
font-size: 25px;
}
#info {
font-size: 18px;
color: #555;
text-align: center;
margin-bottom: 25px;
}
a {
color: #074E8C;
}
.scrollbar {
margin-left: 30px;
float: left;
height: 200px;
width: 210px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow {
min-height: 450px;
}
#wrapper {
text-align: center;
width: 500px;
margin: auto;
}
/*
* STYLE 4
*/
#style-4::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar {
width: 10px;
background-color: #cccccc;
}
#style-4::-webkit-scrollbar-thumb {
background-color: #9fa6ad;
border: 2px solid #9fa6ad;
}
li ul li {} li.on ul {
display: block
}
li.off ul {
display: none
}
<script type="text/javascript" src='https://code.jquery.com/jquery-3.1.1.min.js'> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#nav li").click(function(){
currentClass = $(this).attr('class');
$("#nav li").removeClass('on').addClass('off');
newClass = (currentClass == 'on' ? 'off' : 'on');
$(this).removeClass('off').addClass(newClass);
});
});
</script>
<body>
<id="wrapper">
<div class="scrollbar" id="style-4" class="force-overflow">
<ul id="nav">
<li class=''><strong>MENU</strong>
</li>
<li><strong>User 1 ></strong>
<ul>
<li>Name
</li>
<li>Age
</li>
</ul>
</li>
<li><strong>User 2 ></strong>
<ul>
<li>Name
</li>
<li>Age
</li>
</ul>
</li>
<li><strong>User 3 ></strong>
<ul>
<li>Name
</li>
<li>Age
</li>
</ul>
</li>
</div>
</div>
</ul>
</body>

I made this nav menu for reference. It's responsive to screen size too.
var btn = document.getElementById('navBtn');
var ul = document.getElementById('navUl');
btn.addEventListener("click", function(){
ul.classList.toggle("active");
});
#bar {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
background-color: #333;
}
nav ul {
list-style: none;
padding: 0px;
margin: 0px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: inline-block;
padding: 20px;
color: #fff;
font-family: Verdana;
text-decoration: none;
}
nav ul li:hover {
background-color: #666;
}
#navBtn {
display: none;
}
#media screen and (max-width: 500px) {
nav ul li,
nav ul li a {
text-align: center;
display: block;
}
nav ul {
display: none;
}
nav ul.active {
display: block;
}
#navBtn {
display: block;
width: 60px;
height: 60px;
border: 1px solid #fff;
background-color: #333;
color: #fff;
}
}
<div id="bar">
<button id="navBtn">☰</button>
<nav>
<ul id="navUl">
<li>home</li>
<li>news</li>
<li>contact</li>
<li>about</li>
</ul>
</nav>
</div>
As a side note, you can also technically do this with pure CSS (though, that's a bit tricky; you'd use a checkbox w/ labels for it).
Also, I saw your className = code, so I wanted to specifically point out the Element.classList bit in my code. It comes with .add(), .remove(), .toggle() and other useful methods.

Dropdown menu for webpage

I created a simple website for practice purposes. I'm trying to create a dropdown menu for the Items in navigation but when I ran the website, it doesn't show anything. All files are saved in desktop.
Here is the code for my html(main.html) with jquery(jquery-1.3.2.min.js):
function mainmenu() {
$(" #nav ul ").css({
display: "none"
});
$(" #nav li ").hover(function() {
$(this).find('ul:first').css({
visibility: "visible",
display: "none"
}).show(400);
}, function() {
$(this).find('ul:first').css({
visibility: "hidden"
});
});
}
$(document).ready(function() {
mainmenu();
});
body {
font-family: 'lucida grande', Tahoma, Verdana, Arial, sans-serif;
background-color: #e9e9e9;
}
#wrapper {
width: 1080px;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
background-color: #fff;
}
#banner {
height: 200px;
border: 3px solid #E3E3E3;
background-color: blue;
background-repeat: no-repeat;
background-size: cover;
}
#navigation {
height: 60px;
border: 3px solid #E3E3E3;
margin-top: 20px;
margin-left: 5px;
margin-right: 5px;
background-color: red;
text-shadow: 0.1em 0.1em #333;
}
#nav {
list-style: none;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
width: auto;
display: none;
}
#nav li {
font-size: 24px;
float: left;
position: relative;
width: 180px;
height: 50px;
}
#nav li ul li {
background-color: green;
background-repeat: no-repeat;
background-size: cover;
border: 3px solid #E3E3E3;
padding-left: 10px;
}
#nav a:link,
#nav a:active,
#nav a:visited {
display: block;
color: #fff;
text-decoration: none;
}
#nav a:hover {
color: lightblue;
}
#content_area {
float: left;
width: 750px;
height: 382px;
margin: 20px 0px 20px 5px;
padding: 10px;
border: 3px solid #E3E3E3;
}
#sidebar {
float: right;
width: 250px;
height: 402px;
margin: 20px 10px 20px 10px;
border: 3px solid #E3E3E3;
background-color: yellow;
}
#footer {
clear: both;
width: auto;
height: 40px;
margin-top: 20px;
background-color: blue;
text-shadow: 0.1em 0.1em #333;
color: #fff;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="wrapper">
<div id="banner">
</div>
<div id="navigation">
<ul id="nav">
<li>Home
</li>
<li>Items
</li>
<ul>
<li>T-Shirt
</li>
<li>Pants
</li>
<li>Accessories
</li>
</ul>
<li>Shop
</li>
<li>About
</li>
</ul>
</div>
<div id="content_area">
</div>
<div id="sidebar">
</div>
<div id="footer">
<p>All rights reserved</p>
</div>
</div>

Yes the error is inside your code. You are trying to target the first ul inside the li but in your code you the ul is standalone/ outside the li.
<li>Items
</li>
<ul>
<li>T-Shirt
</li>
<li>Pants
</li>
<li>Accessories
</li>
</ul>
see the ul is out side the Items li, put it inside and it will work like this.
<li>Items
<ul>
<li>T-Shirt
</li>
<li>Pants
</li>
<li>Accessories
</li>
</ul>
</li>
You were putting a ul inside a ul directly.

The problem is not with your jQuery but with the HTML, you should wrap your dropdown menu (ul) with items (li)
function mainmenu() {
$(" #nav ul ").css({
display: "none"
});
$(" #nav li ").hover(function() {
$(this).find('ul:first').css({
visibility: "visible",
display: "none"
}).show(400);
}, function() {
$(this).find('ul:first').css({
visibility: "hidden"
});
});
}
$(document).ready(function() {
mainmenu();
});
body {
font-family: 'lucida grande', Tahoma, Verdana, Arial, sans-serif;
background-color: #e9e9e9;
}
#wrapper {
width: 1080px;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
background-color: #fff;
}
#banner {
height: 200px;
border: 3px solid #E3E3E3;
background-color: blue;
background-repeat: no-repeat;
background-size: cover;
}
#navigation {
height: 60px;
border: 3px solid #E3E3E3;
margin-top: 20px;
margin-left: 5px;
margin-right: 5px;
background-color: red;
text-shadow: 0.1em 0.1em #333;
}
#nav {
list-style: none;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
width: auto;
display: none;
}
#nav li {
font-size: 24px;
float: left;
position: relative;
width: 180px;
height: 50px;
}
#nav li ul li {
background-color: green;
background-repeat: no-repeat;
background-size: cover;
border: 3px solid #E3E3E3;
padding-left: 10px;
}
#nav a:link,
#nav a:active,
#nav a:visited {
display: block;
color: #fff;
text-decoration: none;
}
#nav a:hover {
color: lightblue;
}
#content_area {
float: left;
width: 750px;
height: 382px;
margin: 20px 0px 20px 5px;
padding: 10px;
border: 3px solid #E3E3E3;
}
#sidebar {
float: right;
width: 250px;
height: 402px;
margin: 20px 10px 20px 10px;
border: 3px solid #E3E3E3;
background-color: yellow;
}
#footer {
clear: both;
width: auto;
height: 40px;
margin-top: 20px;
background-color: blue;
text-shadow: 0.1em 0.1em #333;
color: #fff;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="wrapper">
<div id="banner">
</div>
<div id="navigation">
<ul id="nav">
<li>Home
</li>
<li>Items
<ul>
<li>T-Shirt
</li>
<li>Pants
</li>
<li>Accessories
</li>
</ul>
</li>
<li>Shop
</li>
<li>About
</li>
</ul>
</div>
<div id="content_area">
</div>
<div id="sidebar">
</div>
<div id="footer">
<p>All rights reserved</p>
</div>
</div>

slideToggle() not working withe <ul>

I am trying to use slideToggle() function to create a submenu but it's not working. I saw some examples and it was on <div>s not <ul>s so it's only working with <div>s ? Here's my code on fiddle : Fiddle
I am inserting the <script> tags correctly in my HTML and my other jQuery codes run correctly.

You are missing jQuery library in your fiddle. Also there is a typo in your code, callback function should be function() not Function()
$(document).ready(function() {
$('.mainmenu').click(function() {
// ----^----- f should be small letter
$('.submenu').slideToggle('fast');
});
});
.mainmenu {
cursor: pointer;
color: #ffffff;
text-align: center;
display: block;
}
.mainmenu p {
font-size: 20px;
line-height: 10px;
}
.submenu {
list-style-type: none;
padding: 0;
text-align: center;
border: 2px solid black;
border-top: 0;
border-radius: 0 0 10px 10px;
background-color: #464646;
width: 90%;
margin: 0 auto;
margin-bottom: 5px;
display: none;
}
.submenu li {
border-bottom: 2px solid white;
}
.submenu li:last-child,
.submenu li:last-child a:last-child {
border-bottom: 0;
border-radius: 0 0 10px 10px;
}
.submenu a:hover {
background-color: aliceblue;
color: #000000;
}
#sidebar {
background-color: white;
float: right;
}
#sidebar>ul {
list-style-type: none;
margin: 0;
padding: 20px;
}
#sidebar>ul >li {
position: relative;
width: 21em;
background-color: #1a8891;
border: 2px solid #0c383a;
margin-bottom: 5px;
border-radius: 20px;
}
#sidebar a:link,
#sidebar a:visited {
display: block;
position: relative;
width: 100%;
text-align: center;
line-height: 50px;
font-size: 20px;
color: white;
text-decoration: none;
}
#sidebar li:hover {
background-color: #156b72;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sidebar">
<ul>
<li class="mainmenu">
<div class="arrow-up"></div>
<p>Text</p>
</li>
<ul class="submenu">
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
</ul>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
</ul>
</div>;