Currently I use :hover in my CSS to display my nested lists in .wrapper1 elements. I want to make it so that they open on click instead of on hover.
Here is what I've tried so far:
$(function() {
// whenever we hover over a menu item that has a submenu
$('li.parent').on('click', function() {
var $menuItem = $(this),
$submenuWrapper = $('> .wrapper', $menuItem);
// grab the menu item's position relative to its positioned parent
var menuItemPos = $menuItem.position();
// place the submenu in the correct position relevant to the menu item
$submenuWrapper.css({
top: menuItemPos.top,
left: menuItemPos.left + Math.round($menuItem.outerWidth() * 0.75)
});
});
});
Demo: https://jsfiddle.net/72tnxh45/2/
Below is css which can affect to display all sublinks.
.wrapper1 li:hover > .wrapper1 {
display: block;
}
$(document).ready(function(){
$(".wrapper ul li").click(function(){
//do what ever you want to do with li
});
});
Please have a look attached snippet.
There are made some change in jqyery code and css also.
$(function() {
// whenever we hover over a menu item that has a submenu
$('li.parent').on('click', function() {
if($(this).children(".wrapper").attr('style')=='display: block;'){
$(this).children(".wrapper").css('display','none');
}else{
$(this).children(".wrapper").css('display','block');
}
});
});
.wrapper {
position: relative;
}
ul {
width: 200px;
max-height: 250px;
overflow-x: hidden;
overflow-y: auto;
}
li {
position: static;
}
li .wrapper {
position: absolute;
z-index: 10;
display: none;
}
li:hover > .wrapper {
//display: block;
}
li:
ul {
margin: 1em;
color: white;
font-family: sans-serif;
font-size: 16px;
}
li {
padding: 1em;
}
li ul {
margin: 0;
}
li .wrapper {
cursor: auto;
}
li .wrapper li {
padding: 0.5em;
}
li:nth-child(2n) {
background: #0E8CE0;
}
li:nth-child(2n+1) {
background: #0064B3;
}
li.parent {
background: #00B99B;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<ul>
<li>Abc</li>
<li>Def</li>
<li>Ghi</li>
<li>Jkl</li>
<li class="parent">Mno >
<div class="wrapper">
<ul>
<li>Abc</li>
<li>Def</li>
<li>Ghi</li>
<li>Jkl</li>
<li class="parent">Mno >
<div class="wrapper">
<ul>
<li>Abc</li>
<li>Def</li>
<li>Ghi</li>
<li>Jkl</li>
<li>Mno</li>
<li>Pqr</li>
<li>Stu</li>
<li>Vw</li>
<li>Xyz</li>
</ul>
</div>
</li>
<li>Pqr</li>
<li>Stu</li>
<li>Vw</li>
<li>Xyz</li>
</ul>
</div>
</li>
<li>Pqr</li>
<li>Stu</li>
<li>Vw</li>
<li>Xyz</li>
<li class="parent">Abc >
<div class="wrapper">
<ul>
<li>Abc</li>
<li>Def</li>
<li>Ghi</li>
<li>Jkl</li>
<li>Mno</li>
<li>Pqr</li>
<li>Stu</li>
<li>Vw</li>
<li>Xyz</li>
</ul>
</div>
</li>
<li>Def</li>
<li>Ghi</li>
<li>Jkl</li>
<li>Mno</li>
<li>Pqr</li>
<li>Stu</li>
<li>Vw</li>
<li>Xyz</li>
</ul>
</div>
Related
I'm trying to make the slideToggle work but couldn't figure out. As per different answers, I tried adding display: block and display: none but that isn't working either.
JSFiddle Demo: https://jsfiddle.net/987cndtv/
JS:
jQuery(".menupolicies .parent ul").hide();
jQuery(".menupolicies>li>ul").show();
jQuery(".menupolicies .parent > span").click(function() {
jQuery(this).next("ul").slideToggle();
/* jQuery(this).next("ul").toggle(); */
});
jQuery(".menupolicies .parent .nav-header").click(function(e) {
jQuery(this).find("img").toggleClass( "arrow" );
});
CSS:
.menupolicies .parent {
padding: 5px 0;
display: block;
}
.menupolicies .parent ul {
display: none;
}
The issue is with the version (3.3.1.slim.min.js) of jQuery you are using which does not have the animation effect required in slideToggle(). Try with some other version:
jQuery(".menupolicies .parent ul").hide();
jQuery(".menupolicies>li>ul").show();
jQuery(".menupolicies .parent > span").click(function() {
jQuery(this).next("ul").slideToggle();
//jQuery(this).next("ul").toggle();
});
jQuery(".menupolicies .parent .nav-header").click(function(e) {
jQuery(this).find("img").toggleClass( "arrow" );
});
.hide {
display: none;
}
.menupolicies>li {
width: 100%;
}
.menupolicies .parent {
padding: 5px 0;
display: block;
}
.menupolicies .parent ul {
display: none;
}
.menupolicies a, .menupolicies li {
font-size: 14px;
color: #333;
}
.menupolicies .active {
font-weight: bold;
}
.nav {
margin-bottom: 0;
padding-left: 0;
list-style: none;
}
.menupolicies .parent span img {
width: 24px;
float: right;
}
.menupolicies .arrow {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="moduletable">
<ul class="nav menupolicies">
<li class="active deeper parent"><span class="nav-header hide">Market</span>
<ul class="nav-child unstyled small">
<li class="deeper parent">Terms 1</li>
<li class="current active deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png"><span class="image-title">Terms 2</span></span>
<ul class="nav-child unstyled small">
<li class="">Terms A</li>
<li class="active deeper parent"><span class="nav-header "><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png" alt="Fleet"><span class="image-title">Terms B</span></span>
<ul class="nav-child unstyled small">
<li class="">Terms I</li>
<li class="current active">Terms II</li>
<li class="">Terms III</li>
</ul>
</li>
</ul>
</li>
<li class="deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png"><span class="image-title">Terms 3</span></span>
<ul class="nav-child unstyled small">
<li class="">Terms I</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
i want change this menu clickable to hover. When i do this doesen't work :/
I must add more text but question is simple for who known javascript well.
Sorry for my bad language.
I must add more text but question is simple for who known javascript well.
Sorry for my bad language.
I must add more text but question is simple for who known javascript well.
Sorry for my bad language.
(function($, undefined)
{
var open = [];
var opts = {
selector: '.dropdown',
toggle: 'dropdown-toggle',
open: 'dropdown-open',
nest: true
};
$(document).on('click.dropdown touchstart.dropdown', function(e)
{
// Close the last open dropdown if click is from outside the target dropdown
if ( open.length && ( ! opts.nest || ! open[ open.length - 1 ].find( e.target ).length ) )
{
open.pop().removeClass( opts.open );
}
var $this = $(e.target);
// If target is a dropdown then toggle it...
if ( $this.hasClass( opts.toggle ) )
{
e.preventDefault();
$this = $this.closest( opts.selector );
if ( ! $this.hasClass( opts.open ) )
{
open.push( $this.addClass( opts.open ) );
}
else
{
open.pop().removeClass( opts.open );
}
}
});
})(jQuery);
.Row
{
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 10px;
}
.Column
{
display: table-cell;
background-color: red;
}
.dropdown {
position:relative;
min-width:100%;
background:#ccc;
display: inline-block;
}
.dropdown a {
display:block;
text-decoration:none;
color:#333;
}
/* toggle */
.dropdown .dropdown-toggle {
padding:0;
}
/* dropdown */
.dropdown-menu {
position:absolute;
top:100%;
right:0;
left:0;
display:none;
margin:0;
padding:0;
list-style-type:none;
background:#ccc;
}
/* options */
.dropdown-menu .option a {
}
.dropdown-menu .option a:hover {
background-color:#aaa;
}
/* open */
.dropdown-open {
z-index:400;
}
.dropdown-open > .dropdown-menu {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Row">
<div class="Column">
<div id="locale" class="dropdown">
English
<ul class="dropdown-menu">
<li class="option">French</li>
<li class="option">German</li>
<li class="option">Arabic</li>
<li class="option">Chinese</li>
</ul>
</div>
</div>
<div class="Column">
<div id="locale" class="dropdown">
English
<ul class="dropdown-menu">
<li class="option">French</li>
<li class="option">German</li>
<li class="option">Arabic</li>
<li class="option">Chinese</li>
</ul>
</div>
</div>
<div class="Column">
<div id="locale" class="dropdown">
English
<ul class="dropdown-menu">
<li class="option">French</li>
<li class="option">German</li>
<li class="option">Arabic</li>
<li class="option">Chinese</li>
</ul>
</div>
</div>
</div>
Change $(document).on('click.dropdown touchstart.dropdown', function(e) to $(document).on( 'mouseenter touchstart','.dropdown', function(e) {
demo
(function($, undefined) {
var open = [];
var opts = {
selector: '.dropdown',
toggle: 'dropdown-toggle',
open: 'dropdown-open',
nest: true
};
$(document).on( 'mouseenter touchstart','.dropdown', function(e) {
// Close the last open dropdown if click is from outside the target dropdown
if (open.length && (!opts.nest || !open[open.length - 1].find(e.target).length)) {
open.pop().removeClass(opts.open);
}
var $this = $(e.target);
// If target is a dropdown then toggle it...
if ($this.hasClass(opts.toggle)) {
e.preventDefault();
$this = $this.closest(opts.selector);
if (!$this.hasClass(opts.open)) {
open.push($this.addClass(opts.open));
} else {
open.pop().removeClass(opts.open);
}
}
});
})(jQuery);
.Row {
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 10px;
}
.Column {
display: table-cell;
background-color: red;
}
.dropdown {
position: relative;
min-width: 100%;
background: #ccc;
display: inline-block;
}
.dropdown a {
display: block;
text-decoration: none;
color: #333;
}
/* toggle */
.dropdown .dropdown-toggle {
padding: 0;
}
/* dropdown */
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
left: 0;
display: none;
margin: 0;
padding: 0;
list-style-type: none;
background: #ccc;
}
/* options */
.dropdown-menu .option a {}
.dropdown-menu .option a:hover {
background-color: #aaa;
}
/* open */
.dropdown-open {
z-index: 400;
}
.dropdown-open>.dropdown-menu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Row">
<div class="Column">
<div id="locale" class="dropdown">
English
<ul class="dropdown-menu">
<li class="option">French</li>
<li class="option">German</li>
<li class="option">Arabic</li>
<li class="option">Chinese</li>
</ul>
</div>
</div>
<div class="Column">
<div id="locale" class="dropdown">
English
<ul class="dropdown-menu">
<li class="option">French</li>
<li class="option">German</li>
<li class="option">Arabic</li>
<li class="option">Chinese</li>
</ul>
</div>
</div>
<div class="Column">
<div id="locale" class="dropdown">
English
<ul class="dropdown-menu">
<li class="option">French</li>
<li class="option">German</li>
<li class="option">Arabic</li>
<li class="option">Chinese</li>
</ul>
</div>
</div>
</div>
Using css:
.dropdown:hover > ul{
display:block;
}
I tried to understand and optimize your code.
As I can't understand the necessity of the "open" variable,
I removed it and created a working snippet that achieves what you want:
(Check the comments in my snippet for more details)
(function($, undefined) {
// var open = []; // I removed that, but it could be added back
var opts = {
selector: '.dropdown',
toggle: 'dropdown-toggle',
open: 'dropdown-open',
nest: true
};
// TAKIT: Changed with below
// $(document).on('click.dropdown touchstart.dropdown', function(e) {
$('.dropdown').on('mouseenter touchstart', function(e) {
/* TAKIT: Replaced some code here */
$('.dropdown-open').removeClass(opts.open);
// If target is a dropdown then toggle it...
var $this = $(e.target);
if ($this.hasClass(opts.toggle)) {
e.preventDefault();
$this = $this.closest(opts.selector);
if (!$this.hasClass(opts.open)) {
$this.addClass(opts.open);
}
}
});
// TAKIT: Added the below
$('.dropdown').on('mouseleave touchend', function(e) {
// Close all the dropdowns
$('.dropdown-open').removeClass(opts.open);
});
})(jQuery);
.Row {
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 10px;
}
.Column {
display: table-cell;
background-color: red;
}
.dropdown {
position: relative;
min-width: 100%;
background: #ccc;
display: inline-block;
}
.dropdown a {
display: block;
text-decoration: none;
color: #333;
}
/* toggle */
.dropdown .dropdown-toggle {
padding: 0;
}
/* dropdown */
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
left: 0;
display: none;
margin: 0;
padding: 0;
list-style-type: none;
background: #ccc;
}
/* options */
.dropdown-menu .option a {}
.dropdown-menu .option a:hover {
background-color: #aaa;
}
/* open */
.dropdown-open {
z-index: 400;
}
.dropdown-open>.dropdown-menu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Row">
<div class="Column">
<div id="locale" class="dropdown">
English
<ul class="dropdown-menu">
<li class="option">French</li>
<li class="option">German</li>
<li class="option">Arabic</li>
<li class="option">Chinese</li>
</ul>
</div>
</div>
<div class="Column">
<div id="locale" class="dropdown">
English
<ul class="dropdown-menu">
<li class="option">French</li>
<li class="option">German</li>
<li class="option">Arabic</li>
<li class="option">Chinese</li>
</ul>
</div>
</div>
<div class="Column">
<div id="locale" class="dropdown">
English
<ul class="dropdown-menu">
<li class="option">French</li>
<li class="option">German</li>
<li class="option">Arabic</li>
<li class="option">Chinese</li>
</ul>
</div>
</div>
</div>
Feel free to comment if any.
Hope it helps.
Currently on my site when I have too many links, the link falls down below the navigation. See my example: https://jsfiddle.net/cn6z13n1/
Is it possible instead to have a More Links list item at the far right which will have a dropdown populated with links?
.toolkit_nav {
background:#dfdfdf;
width:100%;
height:40px;
padding:0;
}
.toolkit_nav ul {
margin:0;
}
.toolkit_nav ul .page_item {
display:inline-block;
line-height:40px;
list-style-type:none;
margin:0px;
padding:0 20px;
}
.toolkit_nav ul .page_item:first-child {
margin-left:0;
padding-left:0;
}
.page_item:hover, .current_page_item {
background:grey;
}
.page_item a {
color:black;
font-size: 0.9em;
font-weight: 400;
text-decoration:none;
}
<nav class="toolkit_nav">
<div class="row">
<div class="medium-12 columns">
<ul>
<li class="page_item page-item-1035 current_page_item">Introduction</li>
<li class="page_item page-item-1039">Digital Landscapes</li>
<li class="page_item page-item-1039">Link 4</li>
<li class="page_item page-item-1039">Link 3</li>
<li class="page_item page-item-1039">Link 2</li>
<li class="page_item page-item-1039">Link 1</li>
<li class="page_item page-item-1039">Link 5</li>
</ul>
</div>
</div>
</nav>
You would need to do this in js i suggest something like this
get the width of the row (max width for nav)
loop through the li elements and sum up there width (+ remember to add the width of a "more" element here
when sum of width > width of nav element hide the elements
add js to your "more" button which shows the hidden elements
Following code is not tested but should give you an idea:
var maxWidth = $('#nav').width();
var moreWidth = $('#more').width(); // li "more" element
var sumWidth = moreWidth;
$('#nav li').each(function() {
sumWidth += $(this).width();
if(sumWidth > maxWidth) {
$(this).addClass('hide'); // add css for hide class
}
});
$('#more').on('click', function() {
$('#nav .hide').fadeIn(100);
// You will need more code here to place it correctly, maybe append the elements in an container
});
Here an example with your fiddle:
https://jsfiddle.net/cn6z13n1/3/
Note: this is just a rough draft, you might to calc paddings etc. to make this work rly good
Edit: updated example with $(window).resize() function
https://jsfiddle.net/cn6z13n1/6/
You'll need to change you HTML slightly but this will work.
.toolkit_nav {
background: #dfdfdf;
width: 100%;
height: 40px;
padding: 0;
}
.toolkit_nav ul {
margin: 0;
}
.toolkit_nav ul .page_item {
display: inline-block;
line-height: 40px;
list-style-type: none;
margin: 0px;
padding: 0 20px;
}
.toolkit_nav ul .page_item:first-child {
margin-left: 0;
padding-left: 0;
}
.page_item:hover,
.current_page_item {
background: grey;
}
.page_item a {
color: black;
font-size: 0.9em;
font-weight: 400;
text-decoration: none;
}
/* NEW STUFF */
.sub-nav,
.sub-nav li {
box-sizing: border-box;
}
.more {
position: relative;
}
.more>ul {
display: none;
position: absolute;
left: 0;
top: 100%;
padding: 0
}
.more:hover>ul {
display: block;
}
.more>ul>li {
display: block;
width: 100%;
clear: both;
text-align: center;
}
.toolkit_nav ul.sub-nav .page_item:first-child {
padding: 0 20px;
}
<nav class="toolkit_nav">
<div class="row">
<div class="medium-12 columns">
<ul>
<li class="page_item page-item-1035 current_page_item">Introduction
</li>
<li class="page_item page-item-1039">Digital Landscapes
</li>
<li class="page_item page-item-1039">Link 4
</li>
<li class="page_item page-item-1039">Link 3
</li>
<li class="page_item page-item-1039">Link 2
</li>
<li class="page_item page-item-1039 more">More...
<ul class="sub-nav">
<li class="page_item page-item-1039">Link 1
</li>
<li class="page_item page-item-1039">Link 5
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
i'm not sure if i gave the right term. I'm having an issue on how to remove the cache on the hovered item.
Html
<div class="gallery-nav">
<ul>
<li> 01</li>
<li> 02</li>
<li> 03</li>
<li> 04</li>
<li> 05</li>
<li> 06</li>
<li> 07</li>
<li> 08</li>
<li> 09</li>
<li> 10</li>
<li> 11</li>
<li> 12</li>
</ul>
<div class="clear"></div>
</div>
Javascript
function growLine(e) {
e.find('span').stop(false,true).animate({
width: 22
}, 400);
}
function shrinkLine(e) {
e.find('span').stop(false,true).animate({
width: 0
}, 400);
}
$('.gallery-nav li').each(function() {
$(this).append('<span />');
});
$('.gallery-nav li:first-child').addClass('active');
$('.gallery-nav li').hover(function() {
if( !$(this).hasClass('active') ) {
growLine($(this) );
}
}, function() {
if( !$(this).hasClass('active') ) {
shrinkLine( $(this) );
}
});
$('.gallery-nav li a').click( function () {
var allList = $('.gallery-nav li');
var e = $(this);
allList.removeAttr('class');
e.parent().addClass('active');
});
jsFiddle
There is a line below the numbers when hovered.
The problem is the line is not removed once i click on other numbers.
This works but only once.
You are doing animation to set width of span(which is inside li) equal to width=22 and adding classactive to li. You just have to revert this effect.
You need to modify your click event handler so that to set width=0px for span and active class from the li having class="active", see below code
$('.gallery-nav li a').click( function () {
var e = $(this);
$('li.active').find('span').css('width','0px');
$('li.active').removeClass('active');
e.parent().addClass('active');
});
DEMO
try this: Jsfiddle
$('.gallery-nav li:first-child').addClass('active');
$('.gallery-nav li').click( function () {
$(this).addClass('active').siblings().removeClass('active');
});
.gallery-nav ul {
margin: 0;
padding: 0 ;
list-style: none;
}
.gallery-nav li {
float: left;
margin: 0 7px;
}
.gallery-nav li a {
display: block;
position: relative;
text-transform: uppercase;
font: 300 19px 'Lato', sans-serif;
color : #000;
text-decoration: none;
}
.gallery-nav li a:before {
content: '';
position: absolute;
bottom: -2px;
left: 0;
background: red;
height: 1px;
width: 0px;
transition: width .3s ease
}
.gallery-nav li.active > a,
.gallery-nav li:hover > a {
font-weight: 700;
}
.gallery-nav li:hover a:before,
.gallery-nav li.active a:before {
width: 22px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery-nav">
<ul>
<li> 01</li>
<li> 02</li>
<li> 03</li>
<li> 04</li>
<li> 05</li>
<li> 06</li>
<li> 07</li>
<li> 08</li>
<li> 09</li>
<li> 10</li>
<li> 11</li>
<li> 12</li>
</ul>
<div class="clear"></div>
</div>
I have a navigation bar at the bottom of my page rather than at the top. I am trying to implement a "drop-up" suckerfish menu. I want to do it with as little javascript as possible. My current code is as follows and works fine as a drop-down menu. Is there a way to reverse it?
Here is my code:
<style type="text/css">
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav a {
display: block;
width: 10em;
}
#nav li {
float: left;
width: 10em;
background: #000000;
}
#nav li ul {
position: absolute;
left: -999em;
}
#nav li: hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
</style>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<ul id="nav">
<li>Home</li>
<li>About Us
<ul>
<li>Who We Are</li>
<li>What We Believe</li>
<li>Our Pastors</li>
</ul>
</li>
<li>Ministries
<ul>
<li>Victory Kids (VC3)</li>
<li>Victory Youth</li>
<li>Connect Groups</li>
<li>S.O.A.P</li>
<li>Victory Group</li>
</ul>
</li>
<li>Connect
<ul>
<li>Contact Us</li>
<li>Social Networks</li>
<li>Blogs</li>
</ul>
</li>
<li>Media
<ul>
<li>Sermon Podcasts</li>
<li>Videos</li>
<li>Images</li>
</ul>
</li>
<li>Giving
<ul>
<li>Help Support</li>
<li>Ministries We Support</li>
<li>2011 Financial Report</li>
</ul>
</li>
<li>Resources</li>
</ul>
All help is appreciated. Thanks!
<style type="text/css">
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
bottom:0px;
position:absolute;
}
#nav a {
display: block;
width: 10em;
}
#nav li {
float: left;
width: 10em;
background: #000000;
}
#nav li ul {
position: absolute;
left: -999em;
bottom:20px;
}
#nav li: hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
</style>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<ul id="nav">
<li>Home</li>
<li>About Us
<ul>
<li>Who We Are</li>
<li>What We Believe</li>
<li>Our Pastors</li>
</ul>
</li>
<li>Ministries
<ul>
<li>Victory Kids (VC3)</li>
<li>Victory Youth</li>
<li>Connect Groups</li>
<li>S.O.A.P</li>
<li>Victory Group</li>
</ul>
</li>
<li>Connect
<ul>
<li>Contact Us</li>
<li>Social Networks</li>
<li>Blogs</li>
</ul>
</li>
<li>Media
<ul>
<li>Sermon Podcasts</li>
<li>Videos</li>
<li>Images</li>
</ul>
</li>
<li>Giving
<ul>
<li>Help Support</li>
<li>Ministries We Support</li>
<li>2011 Financial Report</li>
</ul>
</li>
<li>Resources</li>
</ul>
Try this without additional JS