I'd like some help figuring out how to re-code the following fly-out menu function:
var site = function() {
this.navLi = $('#dnoa_nav li ul li').children('ul').hide().end();
this.init();
};
site.prototype = {
init : function() {
this.setMenu();
},
setMenu : function() {
$.each(this.navLi, function() {
if ( $(this).children('ul')[0] ) {
$(this)
.append('<span />')
.children('span')
.addClass('hasChildren')
}
});
this.navLi.hover(function() {
$(this).find('> ul').stop(true, true).slideDown('fast');
},
function() {
$(this).find('> ul').stop(true, true).hide();
});
}
}
new site();
You can see it in action here to see what it does right now. Once you see it in action, you'll see that I cannot get the parent LI's to remain "sticky" once you have chosen a child LI. For example: Job Aides > Contacts > Approved Brokers ... and what I mean by that is that the parent LI's (Job Aides and Contacts)do not remain in their hover state when the child LI is being moused over (Approved Brokers).
What I would like for the script to do is to keep the parent LI's in their hover state as a child LI is selected. Looking something like this:
Any ideas on what I can tweak in the function which I have pasted above? Thank you so much in advance!
UPDATE
Below is a copy of my CSS (and I hope that I haven't made a mess):
/* DNoA Nav menu */
.hasChildren {
position: absolute;
width: 11px; height: 24px;
background-image: url('/test/img/page/bkgd_navigation_subcell_hint.gif');
right : 0;
bottom: 0;
}
#dnoa_nav {
float: left;
margin: 0;
padding-top: 3px;
padding-left: 19px;
}
#dnoa_nav li a, #dnoa_nav li {
float: left;
}
#dnoa_nav li {
list-style: none;
position: relative;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.3px;
}
#dnoa_nav li a {
padding: 17px 16px;
text-decoration: none;
color: white;
}
#dnoa_nav li:hover a {
background-image: url('/test/img/page/bkgd_navigation_cell.jpg');
background-repeat: repeat;
}
/* DNoA Nav submenu */
#dnoa_nav li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
padding: 0;
margin: 0;
}
#dnoa_nav li:hover > ul {
display: block;
}
#dnoa_nav li ul li {
_display: inline; /* for IE6 */
}
#dnoa_nav li ul li a {
background: #eeeeee;
padding-top: 8px;
padding-bottom: 10px;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
width: 175px;
font-weight: normal;
color: #005CA9;
display: block;
}
#dnoa_nav li ul li, #dnoa_nav li ul li a {
float: none;
background-image: none !important;
}
#dnoa_nav li ul li:hover a {
background: #005ca9;
background-image: url('/test/img/page/bkgd_navigation_subcell_over.gif') !important;
background-repeat: repeat;
color: #FFFFFF;
}
/* DNoA Nav subsubmenu */
#dnoa_nav li ul li ul {
display: none;
position: absolute;
left: 93%;
top: 7px;
padding: 0;
margin: 0;
border-top: 1px solid #CCCCCC;
z-index: 9999;
}
#dnoa_nav li ul li:hover > ul {
display: block;
}
#dnoa_nav li ul li ul li {
_display: inline; /* for IE6 */
}
#dnoa_nav li ul li ul li a {
background: #f8f8f8;
padding-top: 8px;
padding-bottom: 10px;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
width: 175px;
font-weight: normal;
color: #005CA9;
display: block;
}
#dnoa_nav li ul li ul li, #dnoa_nav li ul li ul li a {
float: none;
background-image: none !important;
}
#dnoa_nav li ul li ul li:hover a {
background: #005ca9;
background-image: url('/test/img/page/bkgd_navigation_subcell_over.gif') !important;
background-repeat: repeat;
color: #FFFFFF;
}
Thanks,
Berklie
I finally got things how I wanted to work... based on the fact that Stack Overflow folks helped to point me in the correct direction: it was the CSS that needed tweaking, not the jQuery function. I ended up re-learning about CSS Selectors and how the use of the "greater than" sign ( ">" ) will allow the CSS to only directly affect a direct child LI of the parent UL... and not cascade down to every other child LI and UL (which was the problem that I was having when I styled the top-most UL and LI). So, these statements were edited to make it work:
#dnoa_nav li:hover a {
background-image: url('/test/img/page/bkgd_navigation_cell.jpg');
background-repeat: repeat;
}
Was edited to:
#dnoa_nav li:hover > a {
background-image: url('/test/img/page/bkgd_navigation_cell.jpg');
background-repeat: repeat;
}
And this:
#dnoa_nav li ul li:hover a {
background: #005ca9;
background-image: url('/test/img/page/bkgd_navigation_subcell_over.gif');
background-repeat: repeat;
color: #FFFFFF;
}
Was edited to:
#dnoa_nav li ul li:hover > a {
background: #005ca9;
background-image: url('/test/img/page/bkgd_navigation_subcell_over.gif');
background-repeat: repeat;
color: #FFFFFF;
}
Thanks again for leading me on a path to learn about CSS Selectors,
Berklie
Related
I have this menu bar: http://jsfiddle.net/PtQAP/
and I need to put it to the bottom and the drop-down menu change to drop-up menu.
How would I do that?
css:
ul, li, a {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #000000;
}
ul > li {
float: left;
}
ul > li a {
color: #fff;
font-weight: bold;
line-height: 40px;
height:40px;
display:block;
padding:0px 10px;
}
ul li a:hover {
background: #666666;
}
ul li ul {
display: none;
position: absolute;
background: #333333;
}
ul li ul li {
float: none;
line-height: 40px;
height: 40px;
}
Thanks for the answers.
give the bar a position of fixed, and set its bottom to 0px, then set your menu to have a bottom of the height of your bar, in this case 40px
div {
background: #999999;
height: 40px;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: #000000;
margin: -8px;
width:100%;
position:fixed;
bottom:0px;
left:0px;
}
ul li ul {
display: none;
position: absolute;
background: #333333;
bottom:40px;
}
JSFiddle Demo
Once I click a menu option the whole page scrolls with it? How Do I stop this?
located on line 411 in jsfiddle
<style>#import url(http://fonts.googleapis.com/css?family=Oswald:400,300|Raleway:400,600,300|Source+Sans+Pro:400,600,300);
#charset 'UTF-8';
/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 15px;
position: relative;
}
#cssmenu a {
line-height: 1.3;
}
#cssmenu {
width: 200px;
}
#cssmenu > ul > li > a {
padding-right: 40px;
font-size: 13px;
font-weight: bold;
display: block;
background: #000000;
color: #9C9C9C;
border-bottom: 1px solid #393939;
text-transform: uppercase;
}
#cssmenu > ul > li > a > span {
background: #000000;
padding: 10px;
display: block;
font-size: 15px;
font-weight: 300;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
color: #fff;
}
#cssmenu > ul > li.active > a span {
background: #000000;
}
#cssmenu span.cnt {
position: absolute;
top: px;
right: 15px;
padding: 0;
margin: 0;
background: none;
padding-top: 20px;
}
/* Sub menu */
#cssmenu ul ul {
display: none;
}
#cssmenu ul ul li {
border: 1px solid #2A2A2A;
border-top: 0;
}
#cssmenu ul ul a {
padding: 10px;
display: block;
color: #FFFFFF;
font-size: 13px;
font-weight: 200;
font-family: 'Source Sans Pro', sans-serif;
}
#cssmenu ul ul a:hover {
color: gray;
}
#cssmenu ul ul li.odd {
background: #2E2E2E;
}
#cssmenu ul ul li.even {
background: #2E2E2E;
}</style>
<style>
.class_slidshow2 {
padding-left: 200px;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
padding-left: 200px;
}
<style>.slideshow {
font-size: 30px;
text-transform: uppercase;
font-family: Arial, Verdana, sans-serif;
color: #a81c11;
display:inline;
width: 80%; /* or dependent on what you like */
float: left;
}
.slideshow {
float: right;
display:inline;
width: 20%; /* relative to width for introtekst */
}</style>
I also several have other problems. How do I keep or "stick" the whole navmenu to the right when scrolling? In a more detailed question. I want my content to be on the right of the navmenu, there will be a lot of content so once the user scrolls they should still be able to see the navmenu without having to scroll back up, and it's for my personal appeal.
located on line 411 in jsfiddle
<style>#import url(http://fonts.googleapis.com/css?family=Oswald:400,300|Raleway:400,600,300|Source+Sans+Pro:400,600,300);
#charset 'UTF-8';
/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 15px;
position: relative;
}
#cssmenu a {
line-height: 1.3;
}
#cssmenu {
width: 200px;
}
#cssmenu > ul > li > a {
padding-right: 40px;
font-size: 13px;
font-weight: bold;
display: block;
background: #000000;
color: #9C9C9C;
border-bottom: 1px solid #393939;
text-transform: uppercase;
}
#cssmenu > ul > li > a > span {
background: #000000;
padding: 10px;
display: block;
font-size: 15px;
font-weight: 300;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
color: #fff;
}
#cssmenu > ul > li.active > a span {
background: #000000;
}
#cssmenu span.cnt {
position: absolute;
top: px;
right: 15px;
padding: 0;
margin: 0;
background: none;
padding-top: 20px;
}
/* Sub menu */
#cssmenu ul ul {
display: none;
}
#cssmenu ul ul li {
border: 1px solid #2A2A2A;
border-top: 0;
}
#cssmenu ul ul a {
padding: 10px;
display: block;
color: #FFFFFF;
font-size: 13px;
font-weight: 200;
font-family: 'Source Sans Pro', sans-serif;
}
#cssmenu ul ul a:hover {
color: gray;
}
#cssmenu ul ul li.odd {
background: #2E2E2E;
}
#cssmenu ul ul li.even {
background: #2E2E2E;
}</style>
<style>
.class_slidshow2 {
padding-left: 200px;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
padding-left: 200px;
}
<style>.slideshow {
font-size: 30px;
text-transform: uppercase;
font-family: Arial, Verdana, sans-serif;
color: #a81c11;
display:inline;
width: 80%; /* or dependent on what you like */
float: left;
}
.slideshow {
float: right;
display:inline;
width: 20%; /* relative to width for introtekst */
}</style>
I also noticed that on all browsers the background moves when the user scrolls. This causes the whole page to look disorientated. I did try to , position: fix; , but that had no effect.
Jsfiddle: http://jsfiddle.net/8GzLv/
Paste the whole markup in: http://www.jmarshall.com/easy/html/testbed.html ,so you can see what I am talking about. Or zoom out of Jsfiddle within the browser.
This is the styling for the background: located on line 334 in Jsfiddle
<style>#headerWrapper {
position: fixed;
width: 200px;
height: 100%;
background-color: black; /* Omit to see body content scroll behind radius. */
}
#headerBorder{
border: black;
border-radius: 35px;
-moz-border-radius: 35px;
-webkit-border-radius: 35px;
overflow:hidden;
}
#headerContent {
background-image:url("http://www.fimfiction-static.net/images/story_images/92970_r.png?1364253348");
background-position: left;
background-repeat: no-repeat;
background-size: cover;
height: 200px;
opacity: 1;
}</style>
And how do I get the content to the top of the screen, and right next to the navmenu
You'll want to float your menu to the left if you want the content to appear at the top of the screen, as well as give your slideshows widths that are less than 1100px. Next, if you want the nav-bar to stop affecting your content, the content will have to be in its own div. I would float that div to the right instead of the individual slideshow divs. Lastly, to get the navbar to scroll with you, you need to give it a position of fixed, or use some javascript. Anyways, it seems that you'll want to use a column layout, so I suggest looking that up.
Here's the jsfiddle: http://jsfiddle.net/8GzLv/1/
I tried not to change your code too much, so the css is in one of your style tags. But like I mentioned above, there is now a div around your slideshows with the class of content, and a div around your menu with the class of menu-placeholder.
But the important css parts to look at are:
.content {
width:800px;
overflow:hidden;
}
.menu-placeholder {
float:left;
clear:left;
min-height:250px;
width:200px;
}
#cssmenu {
position:fixed;
top:150px;
}
i have this css and html for a horizontal menu:
.nav > li:hover {
background: #666666;
text-decoration:none;
}
.active {
background: #666666;
text-decoration:none;
}
nav, ul, li, a {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.container {
width: 100%;
margin: 10px auto;
}
.toggleMenu {
display: none;
background: #666666;
padding: 10px 15px;
color: #ffffff;
width:100%;
text-align:center;
}
.nav {
list-style: none;
*zoom: 1;
background:#f36f25;
text-align: center;
}
.nav:before,.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 12em;
}
.nav a {
padding: 10px 15px;
color:#fff;
}
.nav li {
position: relative;
text-align: left;
}
.nav > li {
display: inline-block;
}
.nav > li > .parent {
background-image: url("/images/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
.nav li li a {
display: block;
background: #666666;
position: relative;
z-index:100;
border-top: 1px solid #ffffff;
}
.nav li li li a {
background:#f36f25;
color:#ffffff;
z-index:200;
border-top: 1px solid #ffffff;
}
#media screen and (max-width: 760px) {
.active {
display: block;
}
.nav {
border-top: none;
}
.nav > li {
display: block;
border-top: 1px solid #ffffff;
}
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
background-image: url("/images/downArrow.png");
background-repeat: no-repeat;
background-position: 95% 50%;
}
.nav ul {
display: block;
width: 100%;
}
.nav > li.hover > ul , .nav li li.hover ul {
position: static;
}
}
<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
<li><span>Homepage</span></li>
<li><span>About Us</span>
<ul>
<li><span>Who Are We?</span></li>
<li><span>Service Status</span></li>
<li><span>Contact Us</span></li>
<li><span>Terms & Conditions</span></li>
</ul>
</li>
</ul>
how can i make the main menu links align right rather than centre?
here is a fiddle: http://jsfiddle.net/B5jtm/
Try this:
.nav {text-align: right;}
Change:
text-align: center;
to:
text-align: right;
in:
.nav {
list-style: none;
*zoom: 1;
background:#f36f25;
text-align: right;
}
jsFiddle example
I removed text-align on the .togglemenu and changed .nav to text-align: right
Please see updated jsFiddle:
http://jsfiddle.net/B5jtm/10/
I have got a task to create a horizontal menu.Each menu has child and these child has sub child. But when I selecting the sub menu there is a separation between these child and sub child. I want to clear the child right side border when it selected and also discard the first sub child's left border. You can check this on http://jsfiddle.net/ucpcA/.
How can i solve this problem?
The css page is
#wrapper {
width:100%;
height:500px;
}
h2 {
color:#787878;
}
#menu, #menu ul {
list-style: none;
padding: 2px;
}
#nav{
border-bottom: 1px solid #CCCCCC;
border-spacing: 0;
display: table;
float: left;
height: 25px;
width: 100%;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav > ul > li:hover {
background: none repeat scroll 0 0 #FFFFFF;
border-color: #ccc #ccc #FFFFFF;
border-style: solid;
border-width: 1px;
padding-bottom: 0;
border-radius:1px;
}
.menu-child {
width:160px;
display:block !important;
}
/*
#menu ul li ul {
border-radius:0px;
border-color:#fff #ccc #ccc #ccc !important;
}
*/
#nav ul li ul li:hover {
//border:0px;
//border-color: #ccc #FFFFFF #FFFFFF #ccc;
}
#nav ul li ul :hover {
//border:0px;
//border-color: #FFFFFF #ccc #ccc;
}
#menu {
float: left;
height: 25px;
}
#menu> li {
float: left;
}
#menu li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#menu ul {
position: absolute;
display: none;
z-index: 999;
}
#menu ul li a {
/*width: 80px;*/
}
#menu li:hover ul {
display: block;
}
#menu {
font-family: Arial;
font-size: 12px;
//background: #F8F8F8;
}
#menu > li > a {
font-family: Verdana, Arial, sans-serif;
font-style: normal;
color:#787878;
font-weight: bold;
}
#menu > li > a:hover {
/*color: #000;*/
}
#menu ul {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 0 0 5px 5px;
margin-top: 1px;
}
#menu ul li a {
color: #000;
}
#menu ul li a:hover {
background: #E0E0E0;
}
.logout {
float:right;
width:300px;
}
.title {
float:left;
width:300px;
}
#footer {
width:100%;
height:100px;
float:left;
}
.subchild-list {
margin:0;
position: absolute !important;
top:0;
right:-89px;
//border-color: #ccc #FFFFFF #ccc #FFFFFF;
}
.child-list ul {
display: none !important;
position: absolute !important;
z-index: 999 !important;
}
.child-list li {
position:relative !important;
}
.child-list li:hover ul {
display: block !important;
}
.child-list li{
border-left:1px solid #C0C0C0;
border-right:1px solid #C0C0C0;
}
.child-list ul{
border-top:1px solid #C0C0C0;
border-bottom:5px solid #C0C0C0;
}
.child-list{
border-bottom:5px solid #C0C0C0;
}
.nav-subchild
{
border-color: #ccc #FFFFFF #ccc #FFFFFF;
}
Below 2 css properties will do the needful.
ul#menu li ul.child-list li.menu-child:hover { border-right:0 !important; }
li.menu-child ul li:first-child { border-left:0 !important; }
why are you re-inventing the wheel? you can use jquery menu, and if you want it horizontal there are proven ways of doing that as well. I do this whenever I want to solve a very old and classic problem.
the best way to win a battle is by not having to fight one.
I've been using the following CSS dropdown box on my website, and I've noticed that when you click to activate the dropdown on an ipad/iphone, there is no way to close the dropdown menu other than refreshing the page.
Is there a JS code that I can add to the bottom of the dropdown box for tablet/phone users so they can close the box if they don't make a selection?
/* css */
#dropdown {
}
#dropdown ul {
}
#dropdown li {
}
.dropmain1 {
background: #f2f2f2 url(images/gradients/drop1bg.jpg) repeat-x;
width: 98px;
border-left: 1px solid #e9e9e9;
border-right: 1px solid #e9e9e9;
margin-top: 10px;
-moz-box-shadow: 3px 9px 8px #888;
-webkit-box-shadow: 3px 9px 8px #888;
box-shadow: 3px 9px 8px #888;
}
.dropmain2 {
background: #f2f2f2 url(images/gradients/drop1bg.jpg) repeat-x;
border-left: 1px solid #e9e9e9;
border-right: 1px solid #e9e9e9;
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
padding: 5px;
-moz-box-shadow: 3px 5px 8px #888;
-webkit-box-shadow: 3px 5px 8px #888;
box-shadow: 3px 5px 8px #888;
}
#drop2 { width: 633px; margin-top: 10px; padding: 9px; }
#drop3 { width: 200px; margin-top: 10px; padding: 9px; }
#drop4 { width: 200px; margin-top: 10px; padding: 9px; }
#drop5 { width: 200px; margin-top: 10px; padding: 9px; }
/*this is the css for the horizontal version*/
.horizontal ul{
border: none;
list-style-type: none;
padding:0;margin:0;
}
.horizontal ul li{
float: left;
position: relative;
margin:0;padding:0;
}
a.toplevel {
display: block;
color: #525252;
text-decoration: none;
overflow: hidden;
display:inline-block;
padding-left:15px;
padding-right: 15px;
line-height:18px;
background:transparent url(images/misc/menu_open.gif) center left no-repeat;
}
.horizontal li li{
float: none;
margin-bottom: -1px;
}
.horizontal li li.last{
border-bottom: none;
}
.horizontal ul li ul{
position: absolute;
top: 1.3em;
left: -1px;
}
.horizontal ul ul ul{
width: 130px;
top: -1px;
left: 128px;
margin-top: 0;
}
.horizontal.left ul ul ul,.horizontal .left ul ul{
top: -1px;
left: -128px;
}
.horizontal ul li li a{
padding: 12px;
}
.horizontal ul li:first-child>a{
}
.horizontal ul li a.first{
}
.horizontal ul li li a.first{
}
.horizontal ul li li:first-child>a{
}
div.horizontal ul li.pixelfix ul{
left: 0;
}
div.horizontal ul li.pixelfix ul ul{
left: 128px;
}
/*here we use a little CSS to make a basic/backup dropdown menu in modern browsers *cough* not IE6 or less *cough* if javascript is disabled.Flickering never happens in these browsers*/
.mlmenu li ul{
display: none;
}
.mlmenu li:hover>ul{
display: block;
}
/*This section makes the menu not work in non-javascript enabled browsers by not showing the menu by default-This can be worked around by making top level links point to a sitemap*/
.accessible li ul{
display: block;
}
/*Code to show an element has a child*/
.mlmenu.plus li a:first-child:not(:last-child):after{
content: ' ';
}
.plus a span{
padding-left: .5em;
}
.noshow{
visibility: hidden;
}
/*colors for menu*/
}
.bluewhite li a{
background-color: ;
color: #ffffff;
}
.bluewhite li a:hover,.bluewhite li a.first:hover,.bluewhite .trail a.hover{
/* HOVER */
}
.bluewhite li:first-child>a:hover{
}
.bluewhite ul{
border-color: #000033;
}
#ldrop a:link, #ldrop a:visited {
}
#ldrop a:hover, #ldrop a:active {
}
#holdjump1 {
padding-left: 8px; padding-bottom: 6px;
}
#holdjump1 div {
}
#holdjump1 a:link, #holdjump1 a:visited {
padding: 2px 0 2px 3px; margin:0;
}
#holdjump1 li {
padding:0; margin:0;
}
.fjl {
display: inline-block;
border-bottom: 1px dotted #c1c1c1;
width:30%;
margin: 0 5px 0 5px;
padding: 2px;
font-size: 12px;
font-weight: normal;
}
.fjl a:link, .fjl a:visited {
display: block;
}
.fjl a:active, .fjl a:hover {
background: #a1a1a1;
text-decoration: none;
color: #ffffff;
}
<div id="dropdown" class="mlmenu horizontal bluewhite blindv plus inaccessible delay">
<ul>
<li>Menu Link</li>
<ul> <li>test</li> </ul>
</ul>
</div>
oops!, I just noticed I had posted the wrong "order" of the ul list.
I posted
$('div#dropdown ul li').click
when it actually should be
$('div#dropdown li ul').click or
$('div#dropdown li ul li').click
What I previously posted was for the main links to be opened and closed. The new method I am posting will open close the sub menu. UL inside of the LI. To add more submenu functioning, just keep adding on to the element.
$('div#dropdown li ul // 1-level drop down
$('div#dropdown li ul li ul // 2-level drop down
$('div#dropdown li ul li ul li ul // 3 level drop down.
Or you could just create classes for each level. Example
instead of a 2-level drop being
$('div#dropdown li ul li ul
you could just do something like this >>
Example menu with a 2-level sub menu
<ul>
<li>link1<ul class="sub1">
<li>sublink1-1<ul>
<li>sub-sublink1-1</li>
<li>sub-sublink1-2</li></ul></li></ul></li>
</ul>
Jquery
<script>
$(document).ready(function() {
$('ul.sub1').click(function() {
$(this).slideToggle();
});
});
</script>
That would cause the 2nd level sub menus to slide up or slide down on click, thus "showing" and "hiding".
Hope this helped a little more!
You can try using JQuery. I'm not sure how to do it in full blown javascript but if you download the jquery library, link to it, and then try something like this it might work.
<script>
$(document).ready(function() {
$('div#dropdown ul li').click(function() {
$(this).show();
$('div#dropdown ul li').click(function() {
$(this).hide();
});
});
});
</script>
or
<script>
$(document).ready(function() {
$('div#dropdown ul li').click(function() {
$(this).slideDown();
$('div#dropdown ul li').click(function() {
$(this).slideUp();
});
});
});
</script>