Resize submenu when page overflow happens - javascript

My submenu Category, overflow the page when resized to a small screen. How do I make the submenu to go to the left everytime this happens?
Here is what's happening
And here is how I want to be
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0;
border: 1px solid black;
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li class="dir">Sub Menu 1</li>
<li class="dir">Sub Menu 2
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Menu 7</li>
<li>Menu 8
<ul>
<li class="dir">Sub Menu 1</li>
<li class="dir">Sub Menu 2
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
</ul>
</nav>
I searched for getBoundingClientRect but I don't know how to implement it. I also tried this plugin but didn't help. https://github.com/gijsroge/offscreen.js/
How can i do this with pure javascript ?
Help much appreciated...


All I had to do was to apply a media query,
#media screen and (max-width:1022px) {
#primary_nav_wrap ul ul ul {
left: -101%;
}
}
problem solved.
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0;
border: 1px solid black;
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
#media screen and (max-width:1022px) {
#primary_nav_wrap ul ul ul {
left: -101%;
}
}
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li class="dir">Sub Menu 1</li>
<li class="dir">Sub Menu 2
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Menu 7</li>
<li>Menu 8
<ul>
<li class="dir">Sub Menu 1</li>
<li class="dir">Sub Menu 2
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
</ul>
</nav>

Related

Can someone tell me what's wrong with my dropdown menu javascript code

I've been learning Javascript and as a bit of practice, thought i'd create myself a dropdown navigation menu, that works on a 'click' rather than hover. I've created the code below (which doesn't work) and i was wondering if someone could explain why so i can see where i've gone wrong.
I can get the dropdown to open, but when i added the code to close the dropdown, the dropdown menu doesn't even open.
I'm hoping someone can point me in the right direction so i can see where i'm going wrong and i can avoid such issues in the future
(function() {
let menuHeader = document.querySelectorAll('.menu-item-has-children');
let subMenu = document.querySelector('.sub-menu');
menuHeader.forEach(function(btn) {
btn.addEventListener('click', function(event) {
event.preventDefault();
subMenu.classList.add('nav-open');
// Close if anywhere on screen aprt form menu is clicked
if (subMenu.classList.contains('nav-open')) {
window.onclick = function(event) {
if (!event.target.classList.contains('sub-menu')) {
subMenu.classList.remove('nav-open');
}
};
};
});
});
})();
<nav class="main-nav">
<ul>
<li>Home</li>
<li class="menu-item-has-children">What We Do
<ul class="sub-menu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
<li>Page 6</li>
</ul>
</li>
<li class="menu-item-has-children">Our Work
<ul class="sub-menu">
<li>Portfolio 1</li>
<li>Portfolio 2</li>
<li>Portfolio 3</li>
<li>Portfolio 4</li>
<li>Portfolio 5</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
As requested, the CSS is as follows
.main-nav ul > li {
display: inline;
position: relative;
}
.main-nav ul li a {
display: inline-block;
font-family: bebas-neue, sans-serif;
font-style: normal;
font-weight: 400;
text-decoration: none;
color: #333;
font-size: 1.3em;
padding: 0.5em 0.8em 0.8em 0.8em;
transition: background 0.2s linear;
}
.main-nav ul li a:hover {
background: #00a492;
color: #fff;
}
.main-nav ul li a:not(:only-child):after {
content: '\25bc';
font-size: 0.6em;
position: relative;
top: -4px;
left: 2px;
}
/* Second Level of Navigation */
.main-nav ul li ul {
width: 250px;
position: absolute;
top: 160%;
left: 0;
background: #00a492;
}
.main-nav ul li ul li a {
display: block;
}
.sub-menu {
display: none;
}
.nav-open {
display: block;
}
.slicknav_menu {
display:none;
}
.highlight-btn {
background: #00a492 !important;
color: #fff !important;
}
``

Consider using event delegation instead. When anywhere on the page is clicked, run an event listener. If the clicked target is not inside a LI, remove the .nav-open from the existing element with .nav-open, if there is one. Otherwise, if the clicked target was the <a> (a descendant of the outer .menu-item-has-children), navigate to its second child (.children[1]) and add the class to it:
function closeOpenNav() {
const currentOpen = document.querySelector('.nav-open');
if (currentOpen) {
currentOpen.classList.remove('nav-open');
}
}
window.addEventListener('click', (event) => {
const li = event.target.closest('.menu-item-has-children');
if (!li) {
// Close if anywhere on screen aprt form menu is clicked
console.log('closing');
closeOpenNav();
return;
}
if (event.target.parentElement !== li) {
// The clicked element is a descendant of a `.nav-open`
// so, don't do anything
return;
}
event.preventDefault();
closeOpenNav();
const thisSubMenu = li.children[1];
thisSubMenu.classList.add('nav-open');
});
.sub-menu {
display: none;
}
.nav-open {
display: block;
}
<nav class="main-nav">
<ul>
<li>Home</li>
<li class="menu-item-has-children">What We Do
<ul class="sub-menu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
<li>Page 6</li>
</ul>
</li>
<li class="menu-item-has-children">Our Work
<ul class="sub-menu">
<li>Portfolio 1</li>
<li>Portfolio 2</li>
<li>Portfolio 3</li>
<li>Portfolio 4</li>
<li>Portfolio 5</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>

I think it can happen because at first you are adding nav-open class than you are checking is it exist if yes you are adding event to window(window still can catch this event) and deleting this class so nothing should happen. Try to addevent.stopPropagation() under event.preventDefault()
(function() {
let menuHeader = document.querySelectorAll('.menu-item-has-children');
let subMenu = document.querySelector('.sub-menu');
menuHeader.forEach(function(btn) {
btn.addEventListener('click', function(event) {
event.preventDefault();
event.stopPropagation()
subMenu.classList.add('nav-open');
// Close if anywhere on screen aprt form menu is clicked
if (subMenu.classList.contains('nav-open')) {
window.onclick = function(event) {
if (!event.target.classList.contains('sub-menu')) {
subMenu.classList.remove('nav-open');
}
};
};
});
});
})();```

This is a wroking demo
(function() {
let menuHeader = document.querySelectorAll('.menu-item-has-children');
let subMenus = document.querySelectorAll('.sub-menu');
menuHeader.forEach(function(btn) {
btn.querySelector('a').addEventListener('click', function(event) {
event.preventDefault();
event.stopImmediatePropagation();
closeAllMenus();
btn.querySelector('.sub-menu').classList.add('nav-open');
});
});
document.addEventListener("click", function(){
closeAllMenus();
});
function closeAllMenus(){
subMenus.forEach(function(ele) {
ele.classList.remove('nav-open');
});
}
})();
.sub-menu{
display: none;
}
.sub-menu.nav-open{
display: block;
}
<nav class="main-nav">
<ul>
<li>Home</li>
<li class="menu-item-has-children">
What We Do
<ul class="sub-menu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
<li>Page 6</li>
</ul>
</li>
<li class="menu-item-has-children">Our Work
<ul class="sub-menu">
<li>Portfolio 1</li>
<li>Portfolio 2</li>
<li>Portfolio 3</li>
<li>Portfolio 4</li>
<li>Portfolio 5</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
The first mistake on your code was declaring this
let subMenu = document.querySelector('.sub-menu');
this always will be the first subMenu, so I just removed it.
If you want to get the subMenu of every element you should do something like this:
btn.querySelector('.sub-menu')
So now It will get the sub menu for every element inside the forEach you already did.
To close the menu on document click I just made an event listener on document click which will remove the class nav-open from any of the sub menus.
document.addEventListener("click", function(){
subMenus.forEach(function(ele) {
ele.classList.remove('nav-open');
});
});

maybe like so, code should be self explanatory
// Dropdown Menu
(function(){
let menuHeader = document.querySelectorAll('.menu-item-has-children');
menuHeader.forEach(function(btn){
btn.addEventListener('click', function(event){
event.preventDefault();
if(this.classList.contains('nav-open')) {
return this.classList.remove('nav-open');
}
var openNavPoints = document.querySelectorAll('.menu-item-has-children.nav-open');
if(openNavPoints.length >= 1) {
[...openNavPoints].forEach(function(openNavPoint) {
openNavPoint.classList.remove('nav-open');
});
}
this.classList.add('nav-open');
});
});
})();
.menu-item-has-children .sub-menu {
display: none;
}
.menu-item-has-children.nav-open .sub-menu {
display: block;
}
<nav class="main-nav">
<ul>
<li>Home</li>
<li class="menu-item-has-children">What We Do
<ul class="sub-menu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
<li>Page 6</li>
</ul></li>
<li class="menu-item-has-children">Our Work
<ul class="sub-menu">
<li>Portfolio 1</li>
<li>Portfolio 2</li>
<li>Portfolio 3</li>
<li>Portfolio 4</li>
<li>Portfolio 5</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>

How to overflow one section of a modal window using CSS

I've created a modal window with 2 sections: a header and a ul. I use jQuery to open the modal. So far so good. I want to make the ul fit the modal box without overflowing.
I can overflow the .modal. But, i really just to want to overflow the ul, not the entire .modal box.
https://jsfiddle.net/tjL1e0ca/
$(document).on("click", "h3", function(e) {
$(".modal").css("display", "block");
})
.modal {
display: none;
position: fixed;
z-index: 100;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 30px);
max-width: 650px;
max-height: calc(100% - 60px);
padding: 30px 20px 20px;
/*overflow: auto;*/
border: 3px solid black;
background-color: #ccc;
}
.modal_1 ul {
background-color: red;
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>click here to open modal</h3>
<div class="modal">
<div class="modal_1">
<div>
<h1>HEADER GOES HERE</h1>
<h2>SUB GOES HERE</h2>
</div>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
</div>
</div>

Add style="overflow-y: auto; height: 100px;" to your ul. This basically adds overflow-y to your ul, except it would only work if you specify a height.
I updated your JSFiddle for you.
Change the height as you wish.
Update: After reading the coments, I realized that you wanted the height of the ul to be adaptive and not set. To fix that, change the height from height: 100px; to height: 50%; (and change the percentage as you wish). That way, the ul will always be 50% of the modal, no matter the height of the modal. Since it didn't seem to work on snippets here, I made a JSFiddle for you.
$(document).on("click", "h3", function(e) {
$(".modal").css("display", "block");
})
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
h3 {
cursor: pointer;
}
.list {
overflow-y: auto;
height: 100px;
}
.modal {
display: none;
position: fixed;
z-index: 700;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 30px);
max-width: 650px;
max-height: calc(100% - 60px);
padding: 30px 20px 20px;
/*overflow: auto;*/
border: 3px solid black;
background-color: #ccc;
}
.modal_1 ul {
background-color: red;
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>click here to open modal</h3>
<div class="modal">
<div class="modal_1">
<div>
<h1>HEADER GOES HERE</h1>
<h2>SUB GOES HERE</h2>
</div>
<ul class="list">
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
</div>
</div>

jQueryUI Sorting issue when width of all list items is not equal

I have an issue while sorting the list items when width if all the <li> is not equal. In the example below I try to place "Item 6" just after "Item 4" to no avail.
$('#sort').sortable({
});
ul {
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin: 5px;
padding: 5px;
background: #0f0;
width: 25%;
}
.ui-sortable-placeholder {
height: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="sort">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li style="width:100%;">Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>

Actually you still can put Item 6 after Item 4 (eg. put Item 6 before Item 4 first then move it after Item 4). It's just a bit difficult. Adding grid option makes it easier. Try to run this snippet:
$('#sort').sortable({
grid: [ 10, 10 ]
});
ul {
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin: 5px;
padding: 5px;
background: #0f0;
width: 25%;
}
.ui-sortable-placeholder {
height: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<ul id="sort">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li style="width:100%;">Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>

How to make “See all category” link button to display rest of the text with jquery 1.11 and above

I have an issue on the dropdown text.
Below snippet using jquery 1.11.1
$(".more").toggle(function(){
$(this).text("Less category").siblings(".complete").show();
}, function(){
$(this).text(" All category").siblings(".complete").hide();
});
.complete{
display:none;
}
.more{
background:black;
color:red;
font-size:13px;
padding:3px;
cursor:pointer;
}
li{
list-style:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>kategori 1</li>
<li>kategori 2</li>
<li class="complete">kategori 3</li>
<li class="complete">kategori 4</li>
<li class="complete">kategori 5</li>
<li class="more">See all category</li>
</ul>
Below snippet using jquery 1.8.3
$(".more").toggle(function(){
$(this).text("Less category").siblings(".complete").show();
}, function(){
$(this).text(" All category").siblings(".complete").hide();
});
.complete{
display:none;
}
.more{
background:black;
color:red;
font-size:13px;
padding:3px;
cursor:pointer;
}
li{
list-style:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<ul>
<li>kategori 1</li>
<li>kategori 2</li>
<li class="complete">kategori 3</li>
<li class="complete">kategori 4</li>
<li class="complete">kategori 5</li>
<li class="more">See all category</li>
</ul>
Problem is, "See all category" text will disappear if I use jquery 1.9.1 and above.
If I use jquery 1.8.3 and lower "See all category will appear and work just fine.
Can anyone help, thanks anyway :)

You need to use the click handler as this variant of toggle is removed in jQuery 1.9
$(".more").click(function() {
$(this).text(function(i, text) {
return text == 'Less category' ? 'All category' : 'Less category';
}).siblings(".complete").toggle();
});
.complete {
display: none;
}
.more {
background: black;
color: red;
font-size: 13px;
padding: 3px;
cursor: pointer;
}
li {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>kategori 1</li>
<li>kategori 2</li>
<li class="complete">kategori 3</li>
<li class="complete">kategori 4</li>
<li class="complete">kategori 5</li>
<li class="more">See all category</li>
</ul>

How can I make my vertical drop down menu with an ease effect?

JSFiddle # http://jsfiddle.net/UqyAq/
html -
<nav>
<ul>
<li>Button 1</li>
<li>Button 2
<ul>
<li>Sub-Button 1</li>
<li>Sub-Button 2</li>
<li>Sub-Button 3</li>
</ul>
</li>
<li>Button 3</li>
<li>Button 4</li>
<li>Button 5</li>
</ul>
</nav>
css -
* {
margin: 0;
padding: 0;
}
nav {
height: 100%; width: 18%;
position: absolute;
}
nav ul {
list-style-type: none;
font-family: 'Universal Accreditation', Serif;
font-size: 18pt;
letter-spacing: 1px;
font-variant: small-caps;
color: black;
}
nav ul ul {
display: none;
}
nav ul li {
display: block;
}
nav ul li:hover ul {
display: block;
}
Basically, you are looking at a simple un-ordered list drop down menu. I am trying to figure out what I need to use to create an easing effect on the drop down of the second tier. Hovering over 'Button 2' will bring up the sub-menu.
Notice how its a one jump movement. How would I slow it down? Maybe look like the sub-menu is sliding out from under 'Button 2'?
Should I use javascript or css?

Use this code..
HTML:
<ul id="menu">
<li>Link 1
<ul class="submenu">
<li>Sub Link 1.1
<ul class="submenu">
<li> Sub Link 1.1.1</li>
<li> Sub Link 1.1.2</li>
</ul>
</li>
<li>Sub Link 1.2</li>
<li>Sub Link 1.3</li>
</ul>
</li>
<li>Link 2
<ul class="submenu">
<li>Sub Link 2.1
<ul class="submenu">
<li> Sub Link 2.1.1</li>
<li> Sub Link 2.1.2</li>
</ul>
</li>
<li>Sub Link 2.2</li>
</ul>
</li>
</ul>
CSS:
.submenu
{
display: none;
}
#menu li ul{
margin-left:15px;
}
JQUERY:
$(document).ready(function () {
$('#menu > li').hover(function () { $(this).find("ul:first").show(); },
function () { $(this).find("ul:first").hide(); }
);
$('#menu li li').hover(function () {
$('ul:first', this).each(function () {
var p = $(this).parent();
$(this).css('top', p.position().top)
.css('left', p.position().left + p.width())
.show();
});},
function () { $('ul:first', this).hide(); }
);
});

Categories

Resources