This question already has answers here:
Show submenu's submenu on submenu hover only
(3 answers)
Closed 4 years ago.
I created an HTML page with a navigation menu in a sidebar. Some of the menu element contain sub-elements. What I am trying to do is:
Hide all sub-elements (this I managed)
If I hover over an element that has sub-element, show the sub-elements.
If I hover over an element that does not have any sub-elements, don't do anything.
I sort of know how to do this with CSS, but since this is for a jQuery class, I want to use jQuery.
I already found a few hints on the web, but I don't really know how to apply the suggestions to my code. I am completey new to jQuery, hence any help will be much appreciated!
Here's the HTML:
<nav>
<ul class="menu">
<li>Home</li>
<li>Page 1</li>
<li>Page 2
<ul class="submenu">
<li>Subpage 2a</li>
<li>Subpage 2b</li>
<li>Subpage 2c</li>
</ul>
</li>
<li>Page 3</li>
</ul>
</nav>
CSS:
nav {
float: left;
width: 200 px;
position: fixed;
top: 80px;
left: 10px;
border-top: 1px solid #9AA2B2;
border-right: 1px solid #9AA2B2;
border-left: 1px solid #9AA2B2;
}
.menu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
.menu a {
display: block;
padding: 10px 15px;
background: linear-gradient(to bottom, #7d7e7d 0%,#6B737E 100%);
border-top: 1px solid #9AA2B2;
border-bottom: 1px solid #2E323A;
text-decoration: none;
color: white;
}
.menu a:hover {
background: linear-gradient(to bottom, #3EB9E7 0%,#8abbd7 100%);
}
.submenu a {
padding: 10px 25px;
background: linear-gradient(to bottom, #E2E2E2 0%,#fcfff4 100%);
border-bottom: 1px solid #CFD0CF;
color: black;
}
.submenu a:hover {
background: linear-gradient(to bottom, #C5C6C5 0%,#d6dbbf 100%);
background-color: #C5C6C5;
}
.submenu {
overflow: hidden;
max-height: 0;
}
This is a jQuery snippet that I found and that seems to make sense, but I am not sure how to apply it.
$(document).ready(function () {
$('#nav > li > a').hover(function(){
if ($(this).attr('class') != 'deployed'){
$('#nav li ul').slideUp();
$(this).next().slideToggle();
$('#nav li a').removeClass('deployed');
$(this).addClass('deployed');
}
});
});
If you want to only use jQuery to achieve this. This is how you can do it.
$(document).ready(function() {
$('.menu > li').hover(function() {
$(this).has('.submenu').children('.submenu').stop().slideToggle();
});
});
So what the above code does is that on hover, it checks if the hovered element has a children with a class '.submenu' and if it does, then it selects that children and toggles it with a sliding effect. Instead of slide toggling it you could obviously do anything with it like adding a class.
The .stop() stops repetition of the sliding effect if you were to quickly toggle hover on and off several times.
I fixed below then the sample works like below snippet (for demo purpose, remove position:fixed from ):
1. bind hover event to $('nav > ul > li > a') intead of $('#nav > li > a'), but it slideDown the sub menu when the mouse hover on the sub menu, so need to change it to $('nav > ul > li')
2. replace max-height:0 with display:none; Below is the reason using display instead of max-height.
Check JQuery API:
As JQuery Defined:
The .slideToggle() method animates the height of the matched elements.
This causes lower parts of the page to slide up or down, appearing to
reveal or conceal the items. If the element is initially displayed, it
will be hidden; if hidden, it will be shown. The display property is
saved and restored as needed. If an element has a display value of
inline, then is hidden and shown, it will once again be displayed
inline. When the height reaches 0 after a hiding animation, the
display style property is set to none to ensure that the element no
longer affects the layout of the page.
3. in the handler of hover bind, execute $('ul', $(this)).slideToggle( "slow" );
$(document).ready(function () {
$('nav > ul > li').hover(function(){
$('ul', $(this)).slideToggle( "slow" );
});
});
nav {
float: left;
width: 200 px;
top: 80px;
left: 10px;
border-top: 1px solid #9AA2B2;
border-right: 1px solid #9AA2B2;
border-left: 1px solid #9AA2B2;
}
.menu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
.menu a {
display: block;
padding: 10px 15px;
background: linear-gradient(to bottom, #7d7e7d 0%,#6B737E 100%);
border-top: 1px solid #9AA2B2;
border-bottom: 1px solid #2E323A;
text-decoration: none;
color: white;
}
.menu a:hover {
background: linear-gradient(to bottom, #3EB9E7 0%,#8abbd7 100%);
}
.submenu a {
padding: 10px 25px;
background: linear-gradient(to bottom, #E2E2E2 0%,#fcfff4 100%);
border-bottom: 1px solid #CFD0CF;
color: black;
}
.submenu a:hover {
background: linear-gradient(to bottom, #C5C6C5 0%,#d6dbbf 100%);
background-color: #C5C6C5;
}
.submenu {
overflow: hidden;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul class="menu">
<li>Home</li>
<li>Page 1</li>
<li>Page 2
<ul class="submenu">
<li>Subpage 2a</li>
<li>Subpage 2b</li>
<li>Subpage 2c</li>
</ul>
</li>
<li>Page 3</li>
</ul>
</nav>
We add const subMenu = $(this).find('.submenu'); to find .submenu element with .menu > li selector.
Then we add our logic to toggle class via addClass and removeClass. I have also included second callback for .hover, which is hoverout.
$(selector).hover(hoverInCallback, hoverOutCallback);
Since I did not want to mess your css I have added only following rule
.submenu.visible {
overflow: initial;
max-height: auto;
}
Hope this helps!
Here is working example.
$(document).ready(function () {
$('.menu > li').hover(function() {
const subMenu = $(this).find('.submenu');
subMenu.addClass('visible');
},
// hoverout
function() {
const subMenu = $(this).find('.submenu');
subMenu.removeClass('visible');
});
});
nav {
float: left;
width: 200 px;
position: fixed;
top: 80px;
left: 10px;
border-top: 1px solid #9AA2B2;
border-right: 1px solid #9AA2B2;
border-left: 1px solid #9AA2B2;
}
.menu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
.menu a {
display: block;
padding: 10px 15px;
background: linear-gradient(to bottom, #7d7e7d 0%,#6B737E 100%);
border-top: 1px solid #9AA2B2;
border-bottom: 1px solid #2E323A;
text-decoration: none;
color: white;
}
.menu a:hover {
background: linear-gradient(to bottom, #3EB9E7 0%,#8abbd7 100%);
}
.submenu a {
padding: 10px 25px;
background: linear-gradient(to bottom, #E2E2E2 0%,#fcfff4 100%);
border-bottom: 1px solid #CFD0CF;
color: black;
}
.submenu a:hover {
background: linear-gradient(to bottom, #C5C6C5 0%,#d6dbbf 100%);
background-color: #C5C6C5;
}
.submenu {
overflow: hidden;
max-height: 0;
}
.submenu.visible {
overflow: initial;
max-height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul class="menu">
<li>Home</li>
<li>Page 1</li>
<li>Page 2
<ul class="submenu">
<li>Subpage 2a</li>
<li>Subpage 2b</li>
<li>Subpage 2c</li>
</ul>
</li>
<li>Page 3</li>
</ul>
</nav>
You just need to make a few adjustments to your code, mostly targeting, but also a minor CSS change.
Change #nav to .menu in all jQuery code so that the correct elements are targeted.
Change max-height: 0; to display: none; in the .submenu CSS so your submenu can be shown . You can also set a min-width for your menu so the width doesn't change when the submenu is visible.
You may also choose to modify your jQuery code or add a mouseout handler so the submenu is hidden when you are no longer over the parent/submenu.
See this fiddle: https://jsfiddle.net/vbryo27z/9/
To actually answer your question unlike these others... Basically add a mouseenter event handler, check if the li has a submenu, if so add the active class to it.
Modify it to how you want them to close
$('.menu li').mouseenter(function() {
if($(this).has('.submenu')) {
$(this).find('.submenu').addClass('active');
}
});
$('.menu .submenu').mouseleave(function() {
$('.submenu').removeClass('active');
});
nav {
float: left;
width: 200 px;
position: fixed;
top: 80px;
left: 10px;
border-top: 1px solid #9AA2B2;
border-right: 1px solid #9AA2B2;
border-left: 1px solid #9AA2B2;
}
.menu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
.menu a {
display: block;
padding: 10px 15px;
background: linear-gradient(to bottom, #7d7e7d 0%,#6B737E 100%);
border-top: 1px solid #9AA2B2;
border-bottom: 1px solid #2E323A;
text-decoration: none;
color: white;
}
.menu a:hover {
background: linear-gradient(to bottom, #3EB9E7 0%,#8abbd7 100%);
}
.submenu a {
padding: 10px 25px;
background: linear-gradient(to bottom, #E2E2E2 0%,#fcfff4 100%);
border-bottom: 1px solid #CFD0CF;
color: black;
}
.submenu a:hover {
background: linear-gradient(to bottom, #C5C6C5 0%,#d6dbbf 100%);
background-color: #C5C6C5;
}
.submenu {
overflow: hidden;
max-height: 0;
transition: 0.3s ease;
}
.submenu.active {
max-height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul class="menu">
<li>Home</li>
<li>Page 1</li>
<li>Page 2
<ul class="submenu">
<li>Subpage 2a</li>
<li>Subpage 2b</li>
<li>Subpage 2c</li>
</ul>
</li>
<li>Page 3</li>
</ul>
</nav>
Related
I have a dropdown menu which is almost complete with just 1 bug/issue that I can't figure out. My nav links to different areas on the home page. So on the home page the user can click a nav link which would instantly take them down to the desired location on the page.
My issue comes as the user clicks on the nav link they are brought to the location but the dropdown menu will not close.
Next to this I also want to animate my menu from top to bottom, so it looks more elegant.
I tried lots of things but I can't seem to make it work..
Hopefully you can help me out!
.toggle, [id^=drop] {
display: none;
}
nav {
margin:0;
padding: 0;
float: center;
position: absolute;
z-index: 400;
border: solid 0px;
}
nav ul {
float: center;
position: relative;
width: 100vw;
}
.menu{
background: rgb(233, 233, 233);
background: linear-gradient(90deg, rgba(233, 233, 233,0.9) 40%, rgb(255, 101, 207) 99%);
background: -webkit-linear-gradient(90deg, rgba(233, 233, 233,0.9) 40%, rgb(255, 101, 207) 99%);
}
nav ul li {
text-align: center;
position: relative;
margin: 0px;
display:left;
}
nav a {
font-family: 'OggR';
color: black;
font-size:14px;
text-decoration:none;
position: relative;
text-align: center;
transition: 0.3s;
}
.toggle + a, .menu {
display: none;
}
.toggle {
position: fixed;
display: block;
padding:4px 20px;
color: rgb(233, 233, 233);
font-size:20px;
text-decoration:none;
width: 20px;
height: 30px;
z-index: 9999999999999999999;
}
<nav>
<label for="drop" class="toggle">☰</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>
<li>ABSTRACT</li>
<li>INTRODUCTION</li>
<li>I. <br>THE MEANING OF NOSTALGIA IN CULTURAL HISTORY</li>
<li>II. <br>CONTEMPORARY NOSTALGIA</li>
<li>III. <br>THE TWO FACES OF NOSTALGIA</li>
<li>CONCLUSION</li>
<li>BIBLIOGRAPHY</li>
</ul>
</nav>
There is no need for javascript, just add this to your css:
#drop:checked + .menu {
display: block;
}
Codepen: https://codepen.io/manaskhandelwal1/pen/poExqJv
html. i added ids:
<nav>
<label for="drop" class="toggle" id="toggle">☰</label>
<input type="checkbox" id="drop" />
<ul class="menu" id="menu">
<li>
<li><a class="navLink" href="#abstract">ABSTRACT</a></li>
<li><a class="navLink" href="#introduction">INTRODUCTION</a></li>
<li><a class="navLink" href="#chapterI">I. <br>THE MEANING OF NOSTALGIA IN CULTURAL HISTORY</a></li>
<li><a class="navLink" href="#chapterII">II. <br>CONTEMPORARY NOSTALGIA</a></li>
<li><a class="navLink" href="#chapterIII">III. <br>THE TWO FACES OF NOSTALGIA</a></li>
<li><a class="navLink" href="#conclusion">CONCLUSION</a></li>
<li><a class="navLink" href="#bibliography">BIBLIOGRAPHY</a></li>
</ul>
</nav>
css: i gave menu postion absolute and i added top: -100% to make it "dissapear", i deleted the position of nav, i added class .menu.open to handle the open, i added transition to .menu for the animation.
.toggle,
[id^=drop] {
display: none;
}
nav {
margin:0;
padding: 0;
float: center;
z-index: 400;
border: solid 0px;
}
nav ul {
float: center;
position: relative;
width: 100vw;
}
.menu{
position:absolute;
top:-100%;
background: rgb(233, 233, 233);
background: linear-gradient(90deg, rgba(233, 233, 233,0.9) 40%, rgb(255, 101, 207) 99%);
background: -webkit-linear-gradient(90deg, rgba(233, 233, 233,0.9) 40%, rgb(255, 101, 207) 99%);
transition: 0.3s ease-in;
}
.menu.open{
top:30px;
}
nav ul li {
text-align: center;
position: relative;
margin: 0px;
display:left;
}
nav a {
font-family: 'OggR';
color: black;
font-size:14px;
text-decoration:none;
position: relative;
text-align: center;
transition: 0.3s;
}
.toggle {
cursor:pointer;
position: fixed;
display: block;
padding:4px 20px;
color:black;
font-size:20px;
text-decoration:none;
width: 20px;
height: 30px;
z-index: 9999999999999999999;
}
and this is the js:
//adding the click event to the toggle
let menu = document.getElementById('menu')
let toggle = document.getElementById('toggle')
let links = document.getElementsByClassName('link')
for(let i = 0; i < links.length; i++){
links[i].addEventListener('click', () => {
menu.classList.remove('open')
toggle.innerHTML = '☰'
})
}
document.getElementById('toggle').addEventListener('click', () => {
if(menu.classList.contains('open')){
menu.classList.remove('open')
toggle.innerHTML = '☰'
} else {
menu.classList.add('open')
toggle.innerHTML = 'X'
}
})
Edit:
I added class to the and i loop through them and give event on click to each link so when you click it will close the nav.
check the code pen now
https://codepen.io/Elnatan/pen/PoGyXwx
you can see it here
To be able to implement it in your page:
add to each <a class="navLink"> (check the HTML above)
add id to manu element and to toggle element <ul class="menu" id="menu"> and <label for="drop" class="toggle" id="toggle">☰</label>
add to your css .menu.open {display:block}
create navHandler.js file and add it to your HTML ```
5.copy this code and past it in your navHandler.js file:
let menu = document.getElementById('menu')
let toggle = document.getElementById('toggle')
let links = document.getElementsByClassName('navLink')
for(let i = 0; i < links.length; i++){
links[i].addEventListener('click', () => {
menu.classList.remove('open')
})
}
if you follow the steps correctly it should work
There is a dropdown menu, you need to do to submenu falls with a delay.
This is an [example][1] of how I implemented at the moment.
As soon as the button the mouse is over using setTimeout launching the countdown until the menu appears, if the cursor is removed from button, then cancel the timeout using clearTimeout.
Can't understand why it doesn't work.
Transition not working with display: none, so that's not an option.
how to fix to get it working?
The CSS transitions won't work with display: block; or display: none;. You can use jQuery .delay():
$(function () {
$("ul").hide();
$("a").mouseover(function () {
$("ul").delay(1000).fadeIn();
});
});
a {display: inline-block; text-decoration: none; padding: 5px; color: #000; border: 1px solid #ccc; border-radius: 3px; line-height: 1;}
.btn {margin-bottom: -1px;}
ul, li {margin: 0; padding: 0; list-style: none; border: 1px solid #ccc;}
ul {padding: 5px; background-color: #fff; width: 100px;}
ul li a {display: block; border-width: 0; border-top-width: 1px; border-radius: 0}
ul li:first-child a {border-top: 0;}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
Menu
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
I want to add side menus to the sub-menus like PRODUCT 1, PRODUCT 2 etc. that appear on the side on hover over them. How do I do that on the following code?
This is the code that I have so far.
CSS:
#import url(http://fonts.googleapis.com/css?family=Open+Sans: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:'Open Sans', sans-serif;
font-size: 14px;
position: relative;
}
#cssmenu a {
line-height: 1.3;
}
#cssmenu {
width: 300px;
margin-left: 90px;
background: #A3FFFF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 3px;
padding: 3px;
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}
#cssmenu > ul > li {
margin: 0 0 3px 0;
}
#cssmenu > ul > li:last-child {
margin: 0;
}
#cssmenu > ul > li > a {
font-size: 15px;
display: block;
color: #ffffff;
text-shadow: 0 1px 1px #000;
background: #A3FFFF;
background: -moz-linear-gradient(#565656 0%, #323232 100%);
background: -webkit-gradient (linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
background: -webkit-linear-gradient(#565656 0%, #323232 100%);
background: linear-gradient(#565656 0%, #323232 100%);
border: 1px solid #000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#cssmenu > ul > li > a > span {
display: block;
border: 1px solid #666666;
padding: 6px 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-weight: bold;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
font-weight: bold;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
background: #47A3FF;
background: -moz-linear-gradient(#47A3FF 0%, #47A3FF 100%);
background: -webkit-gradient (linear, left top, left bottom, color-stop(0%, #47A3FF), color-stop(100%, #47A3FF));
background: -webkit-linear-gradient(#47A3FF 0%, #47A3FF 100%);
background: linear-gradient(#47A3FF 0%, #47A3FF 100%);
color: #fff;
text-shadow: 0 1px 1px #fff;
border: 1px solid #47A3FF;
}
#cssmenu > ul > li.active > a span {
border: 1px solid #47A3FF;
}
#cssmenu > ul > li.has-sub > a span {
background: url(images/icon_plus.png) 98% center no-repeat;
}
#cssmenu > ul > li.has -sub.active > a span {
background: url(images/icon_minus.png) 98% center no-repeat;
}
/* Sub menu */
#cssmenu ul ul {
padding: 5px 12px;
display: none;
}
#cssmenu ul ul li {
padding: 3px 0;
}
#cssmenu ul ul a {
display: block;
color: #191975;
font-size: 13px;
font-weight: bold;
}
#cssmenu ul ul a:hover {
color: cornflowerblue;
font-weight:bold;
}
JS:
(function ($) {
$(document).ready(function () {
$('#cssmenu > ul > li > a').click(function () {
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
var checkElement = $(this).next();
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if ($(this).closest('li').find('ul').children().length == 0) {
return true;
} else {
return false;
}
});
});
})(jQuery);
HTML:
<div id='cssmenu'>
<ul>
<li class='has-sub'>
<a href='#'><span>CENTRAL COMPLIANCE</span></a>
<ul>
<li><a href='#'><span>PRODUCT 1</span></a></li>
<hr>
<li><a href='#'><span>PRODUCT 2</span></a></li>
<hr>
<li><a href='#'><span>PRODUCT 3</span></a></li>
<hr>
<li><a href='#'><span>PRODUCT 4</span></a></li>
<hr>
<li><a href='#'><span>GEPOC</span></a></li>
<hr>
<li><a href='#'><span>Global Registration</span></a></li>
<hr>
<li><a href='#'><span>MBL</span></a></li>
<hr>
<li><a href='#'><span>Account Affirmations</span></a></li>
<hr>
<li class='last'><a href='#'><span>Outside Affiliations</span></a></li>
</ul>
</li>
<li class='has-sub'>
<a href='#'><span>CONTROL ROOM</span></a>
<ul>
<li><a href='#'><span>CDS</span></a></li>
<hr>
<li><a href='#'><span>UK Registration</span></a></li>
<hr>
<li class='last'><a href='#'><span>Compliance Portal</span></a></li>
</ul>
</li>
<li class='has-sub'>
<a href='#'><span>LARGE HOLDINGS</span></a>
<ul>
<li class='last'><a href='#'><span>LHO</span></a></li>
</ul>
</li>
<li class='has-sub'>
<a href='#'><span>ORCHESTRIA</span></a>
<ul>
<li class='last'><a href='#'><span>Orchestria</span></a></li>
</ul>
</li>
</ul>
</div>
Please help me edit this code. Thanks.
The css attribute :hover should work well. Begin with a div that has a display of none. Then on hover of product 1, for example, change to display block.
.side-menu {
display:none;
}
.product1:hover > .side-menu {
display:block;
}
It is important to note that this only works if the menu item that is to be hidden and shown is a child of the the item you are hovering over. That shouldn't be an issue for you.
Edit for Clarification:
In your HTML add the ul that will hold your side menu. Assign a class to the ul. This is how you create a nested list. Also add a class to the li product 1 so that we can select it.
<li>Product1</li>
<ul class="side-menu">
<li>first sub menu item</ul>
</ul>
</li>
Now your css. It will be the same as what I wrote above because I used the same class names. What happens is when the page loads the side menu will be hidden because the display is set to none. When you :hover over the html element with a class of 'product1' it changes the display attribute of the side menu from none to block.
You will still need to position the new menu item appropriately.
I am trying to create a mouseover navigational site. I have this as my basic design but I wanted to have the main buttons of "Our Team", Locations, and Patient Reources. This is what I had before trying to change to a mouseover scheme...
<div class="title">Division of Gastroenterology</div>
</center>
<div class="left_side">
<p> Staff</p>
<p><b>Faculty</b></p>
<p><b>Fellows</b></p>
<p>Locations</p>
<p><b>Perelman Center for Advanced Medicine</b></p>
<p><b>Presbyterian Medical Center</b></p>
<p><b>Penn Medicine at Radnor</b></p>
<p>Patient Resources</p>
<p><b> Procedure Preps</b></p>
<p><b>Insurance Provider Numbers</b></p>
<p><b>IBD Diet</b></p>
I tried this but am clearly missing something...
what i have done in the past is hide the dropdown off the screen, then when the user hovers over a link bring the dropdown back into view.
I accomplished this by using unorderd lists like this:
<ul id="nav">
<li>Home
<ul>Link 1</ul>
<ul>Link 2</ul>
<ul>Link 3</ul>
</li>
...
</ul>
And in the CSS set the main <li>'s position to relative, the dropdown to absolute and :hover of the dropdown sets the left position to 0
/* --- MAIN LINK --- */
#nav li{
float:left;
margin-right:35px;
position:relative;
}
/*--- DROPDOWN ---*/
#nav ul{
list-style:none;
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav li:hover ul{
left:0; /* Display the dropdown on hover */
I think you are trying to create a navigational bar as inferred from the information you've posted as well as your general question.
To implement this fully would require a bit of editing and explanation - which will be too long to do fully. So, I adapted a nice solution off the web that uses unordered lists, and CSS and have made it available to you as well as the article from where it is linked.
Solution Attempt: http://jsfiddle.net/zFsaF/1/
<nav>
<ul>
<li>Staff
<ul>
<li>Faculty</li>
<li>Fellows<li>
</ul>
</li>
<li>Locations
<ul>
<li>Perelman Center for Advanced Medicine</li>
<li>Presbyterian Medical Center</li>
<li>Penn Medicine at Randor</li>
</ul>
</li>
<li>Patient Resources
<ul>
<li>Procedure Preps</li>
<li>Insurance Provider Numbers</li>
<li>IBD Diet</li>
</ul>
</li>
</ul>
</nav>
CSS:
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
Article: http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
You can of course adapt this as you need it however you wish.
NOTE: If some things do not make sense, you can always refer back to the original article, use Google, or consult the very good W3Schools reference:
http://www.w3schools.com/css/css_navbar.asp
Good luck!
UPDATE:
The OP forgot to mention that the solution has to be in Javascript.
As such, the best place to begin would be to examine tutorials that have already done what is requested. Here's an excellent place to start:
http://vandelaydesign.com/blog/tools/dropdown-navigation-menus/
I'm trying to disable the hover functionality for a menu.
I want it to be enabled only under certain conditions.
I've tried using $(".ulColor").removeClass('hover');, but that hasn't worked
The CSS code for enabling the hover is :
li:hover ul, li.over ul { display: block; }
Here is the HTML DIV inside which the menu resides -
<div id="pColorSelectorDiv" class="parentOfAll">
<ul id="colorNav" class="ulColor">
<li id="liColorNav" ><a id="colorSelected" class="firstAnchorChild">Colors</a>
<ul id="ulColorChild" class="ulColor">
<li><a id="bkgColor-1" class="bkgColor-1 anchorClass" name="colorPallete" onclick="colorPicked('1');">COLOR</a></li>
<li><a id="bkgColor-2" class="bkgColor-2 anchorClass" name="colorPallete" onclick="colorPicked('2');">COLOR</a></li>
<li><a id="bkgColor-3" class="bkgColor-3 anchorClass" name="colorPallete" onclick="colorPicked('3');">COLOR</a></li>
</ul>
</li>
</ul>
</div>
Here is the rest of the CSS code :
div[id="pColorSelectorDiv"] ul {
margin: 0;
padding: 0;
list-style: none;
width: 50px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
div[id="pColorSelectorDiv"] ul li {
position: relative;
}
.firstAnchorChild{
display: block;
text-decoration: none;
color: #777;
background: White; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
cursor: pointer;
}
li ul {
position: absolute;
left: 49px; /* Set 1px less than menu width */
top: 0;
display: none;
background: White;
}
/* Styles for Menu Items */
.anchorClass{
display: block;
text-decoration: none;
color: #777;
background: White; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
cursor: pointer;
}
.bkgColor-1 {background: #00FFFF; color: #00FFFF;}
.bkgColor-2 {background: #0000FF; color: #0000FF;}
.bkgColor-3 {background: #7FFF00; color: #7FFF00;}
I think you want
li.hover:hover ul { display: block; }
instead of
li:hover ul, li.over ul { display: block; }
Now this style will affect ul only when li is hovered and has hover class.
A simplified example.
PS You might also benefit from using 'code sample' button on edit form (the one with zeroes and ones) to format your code. Among other things, it'll preserve indentation (and thus increase readability). The key combination is ctrl+K. I've edited one of your code samples to demonstrate it.