Vertical Flyout JavaScript Menu

• Pingback: Sliding JavaScript Dropdown Menu - Web Development Blog

• Peter A

  Mr. Leigeber,
  You are so in control you are out of control!

  Great job. Very nice. I appreciate its low foot print. As soon as I get this up I will be happy to let see your work in action…. domo. p

• http://www.leigeber.com Michael

  @TaTaC – For now yes. It could fairly easily be extended to handle multiple levels. I plan on having both the horizontal and vertical versions with multi-level support within the next week.

• http://www.booto.net Booto

  color is so light.maybe can little deep.

• http://www.leigeber.com Michael

  @Booto – You are free to alter the CSS in any way to accommodate your GUI.

• http://asev.org Bill Mead

  Any chance for a wordpress plugin for this? Very Nice!

• daveyp

  Michael – quick question – how does the opacity work on this?
  What if I don’t want the background color to reach “opacity: 1;” -
  I tried setting it in the css but I think it has something to do with the “flyout.js”.

  Anyways – great job and thanks… – so glad I found your blog

• http://www.leigeber.com Michael

  @Bill – It is possible, I will take a look at it.

  @daveyp – On line 54 you will see that the opacity is simple a fraction based on the height. You could just divide the result by some number or change that code around to function as you please. Shoot me an email if you need any help.

• jenn

  prob overlooking something really simple…but how would i make menu item #3 a link?

  thanks!

• http://www.leigeber.com Michael

  @jenn – You might want to take a look at the original dropdown menu. It has the information about creating a new menu, the same markup applied the the flyout.

• Pingback: Freak-Log™ #12 — Freak Group

• Pingback: This Month’s Best: May 2008 - Six Revisions

• Pingback: JavaScript sin frameworks / acualicio.us

• ArbuZz

  I’m on FF3 RC1. I cant’ see any effect of the script

• Ray

  Is there a vertical and horizontal menu combination? I need to implement a horizontal menu with the option of submenus to open vertically. Anyone come across that or know if it can be done with this menu?dropdown.js

• http://www.leigeber.com Michael

  @Ray – There is a horizontal menu a few posts back. Let me know if that isn't what you are looking for.

• mikiko

  Is there a vertical and horizontal menu combination? i try to combine them but unsuccessful.

• http://www.theoctilliongroup.com John

  Noticed this comment:

  @TaTaC – For now yes. It could fairly easily be extended to handle multiple levels. I plan on having both the horizontal and vertical versions with multi-level support within the next week.

  Any chance that it’s done yet?

• http://www.leigeber.com Michael

  @John – I am about done, hung up on an IE issue as usual. Will post as soon as it is available.

• http://www.magnumtools.com Sean

  @Michael – I want to have your babies! I cant tell you how much time you’ve saved me in this complete overhaul I’m working on. Looking forward to the release of the multi-level script. Your skill in lightweight java is priceless and the fact that you don’t horde it reminds me of the early days when the net was built by a share and share-alike community of dev’s.

• Pingback: » Blog Archive » Things

• Justin

  Noticed that the background doesn’t change in the boxes in IE 6 if it’s an image. Works on other browsers. Is there a workaround?

• Brenda

  Have you done a 3rd level of flyout? I am trying to get that, but am having some problems. Also, I am wondering about linking the main “button.”

  Thank you for the menu!

• http://www.leigeber.com Michael

  @Justin – IE6 does not support the :hover property. You would code a “work around” with JavaScript but personally I am fine with the few IE6 users not getting the effect.

  @Brenda – I almost have completed the code but have been far too busy to work out the couple remaining bugs. Soon hopefully.

• http://www.sbkhan.net Shan Khan

  Dear author,
  Is it possible to create sub menu of sub menu.
  For example:
  1. Customer
  1.1. New Customer
  1.2. Edit Customer
  1.3. Serach Customer
  1.3.1. By Company
  1.3.2. By By City

  Awaiting of your quick reply.

• http://www.sbkhan.net Shan Khan

  What about multilevel menu???
  Is it ready???
  Pls reply us soon.

• http://www.leigeber.com Michael

  @Shan Khan – I have had no time recently having taken a new job and moved cross country. Things will finally settle down next week so hopefully then I can catch up this script as well as a couple others.

• Erick

  hello! Nice work Can it be used normal frames (instead of inline frames)?

• http://daughtersofnorway.org Katie Allen

  IN above “@jenn – You might want to take a look at the original dropdown menu. ” (May 30 reply) … where do I find original dropdown menu so I can make menu item 3 a link without screwing up alignment.
  (The updated website not online yet…due to problem with alignment of adding the a to menu items like 3….)…

• Jesse

  Hey guys. Micheal, I know you’re busy so i don’t expect that you have it completed yet, but has anyone come up with a solution to multi-levels?

• Jeff

  Amazingly perfect.. and sooo easy to customize. Don’t change a thing!! Great job!

• http://www.zoewhitton.com little zed

  Hey Michael

  Very nice work, and like Sean said, you’ve just saved me a lot of time. Love it – hugely appreciated.

• Ben

  Is there a way to make the top level a clickable item? I have one item on my menu that doesn’t need any submenus, but can’t seem to figure out how to get the top level to act as a link.

• http://www.rossini.com Brenda

  Has anyone succeeded in linking just the menu item, in addition to the fly-out menu?

• http://www.rossini.com Brenda

  OK. This may be “old school,” but it works. I made a style for an anchor tag, with the background set to a transparent .gif file, and then linked the menu item. The definition list still produces the fly-out, but now I also have a “button” with a link for the main menu selection.

• http://www.leigeber.com Michael

  @Erick – This script is really not intended for iframes.

  @Katie Allen – The vertical dropdown is what I was referring to.

  @Ben and Brenda – I updated the demo so that the fourth dropdown header is a link. Take a look at http://sandbox.leigeber.com/flyout/flyout.html.

• http://pixeltechnologies.net Sukh

  Can you please let me know if it is possible to have a multicolumn version of the vertical dropdown?

• Ben

  @ML

  Thanks for that. For some reason, when I make it a link, it extends the color of the menu to the right past the boundaries of the box.

• Gunnar

  Yes, i am presented with the same problem. I also get the grey menu link that extends outward. I redownloaded the demo, but it has not been updated i nthe zip file. I assume you edited the css file as well? I am kinda stuck at the moment.

• Gunnar

  ok so i managed to get it working, kinda. I edited the css file, the grey block is now not extending outward anymore, however i still have a visible grey area on top of the button. When i remove the background it is very visible.

  @Ben: edit the following line in css (.dropdown a). Change padding to 0px. This should remove the outward clickable area. the rest i am still trying to figure out.

• Gunnar

  ok, so changing the padding to 0px changes the flyout menu items as well, so rather don’t change it. Back to square one.

• Carlijn

  Hi Michael,

  I used your vertical drop down box for the intranet site of my company (using IE7). With some moderations, it worked out really nice!
  The only thing i cannot fix is that I want the original background back. You told someone to fix it in JS in line 54. But i am really a noob with JS. Can you send me the moderated section (code) for no opacity?
  And the second problem: the image for the menu works, but not the hover image. Maybe because hover can only be used with “a”? You know how to fix it?

• http://www.leigeber.com Michael

  @Sukh – Sure, just float:left some divs/lis/etc.

  @Ben – Probably an issue with the widths being set in the CSS. Play around with it and you should be able to resolve.

  @Gunnar – Shoot me a link and I will take a look. It can be a little tricky.

  @Carljin – IE6 only supports the hover on a link buT the other browsers should have no problems. I am not 100% sure what you are referring to with the opacity. Email me and I will get back to you when I can.

• http://nationallawdebates.nuigalway.ie Peter

  Hi great menu Michael,

  I’ve created a multicolumn version (4 of the menus side by side on one page). It works perfectly in firefox (v2), however in IE7 the pop up layers keep appearing underneath the next column. I can’t find out whats causing it (Zindex possibly?).

  Anyone come across a solution to this problem?

• http://nationallawdebates.nuigalway.ie Peter

  Actually just cracked it. I needed to have each preceding menu with a higher z-index in the container divs. So the left most menu’s zindex needs to be 4, the next 3 and so on. Don’t mind me – today has been a bit of a learning curve.

  Thanks Again!

• Lamont

  Hello.

  Awesome menu.
  I am new to JS, but… is there a way to make the menu slide from the left.
  So when I roll over a link, the sub-menu slides in from the left.
  Also, how can I take away the offset from the top. So that I can offset the menu anywhere in the page I want. Any input would be nice, thanks.

  P.S. Here is a site, http://www.rhinoliningsindustrial.com/, the menu is in flash, but you can get an idea of what I am talking about. That is what I want to re-create in JS and I can see this script bring capable, thanks.

• Sami

  @ML – thanks very much for this, you’ve helped me out no end!!! I’m still learning this whole html/css malarky so still having a few teething problems.
  Whats the div id “wrapper”? is it essential for this to work?
  I’m using this in a shared php so only the right hand column will show this on every page. I need it to be 140px wide so the main body text for all the other pages will align at the top. At the moment the main body starts underneath where the drop down menus finish, so i’m wondering if the “wrapper” is in the way.
  I hope i’m making sense explaining this!!! Can you help?
  Many thanks, Sami

• Sami

  @ ML Never mind, i just changed it about a bit and got what i need! Thanks anyway!!

  Sami

• Sami

  @ML
  OK i’m stuck again!!
  I have 4 menu buttons listed with horizontal pop up menus. Ive managed to change the layout to what i want but i want one of them to be a different colour to the others and the pop up to different colour aswell. I’ve tried making a new setting but either nothing changes or the the colour does change but the pop up menu appears underneath instead of to the right.
  How can i change this?

  Thank, Sami

• Pingback: This Month’s Best: May 2008 « Jonsunhee’s Weblog

• Pingback: Zintak» Blog Archive » Sliding JavaScript Menu

• Mel

  I have used your code…THANKS!…but I have had to modify it a little bit and it doesn’t exactly look like the pretty buttons you have on your page, but I was more interested in the cool fade in type drop down effect than the buttons, what I have will work for me. I do not have this page up as of yet for you to see, but do have a question. Frequently I must change the information in the drop down box to link to different places, the site I am wanting to use it on has at least 15 pages which means the way that this is set up, I have to edit 15 pages every time something changes. Is there a way to make an external sheet to link to for the link information? If so could you show me how? THANK YOU

• Jennifer

  I am new to CSS and javascript…How do I link to a website if it doesn’t have a flyout. In this example, how would you link “menu item three” to another website?

  Thanks for your help!!!!

• Chuck

  Hi! This is a great flyout menu! I’m wondering if you’d got any further with the wordpress plugin idea (original query by Bill). I’d love to use it in a site for my father-in-law.
  Thanks!

• http://non Padma

  can this menu be expandable dropdown menu please help

• dog

  great script… would it be difficult to modify so the flyout menus appear on the left side? i’d love to work this into a hebrew site i’m building…

  cheers

• http://www.sotadjur.se d0ri0

  You can also do like this if you want the first menu button to be linked:
  EXAMPLE:

  <dl class=”dropdown”>
  <dt id=”five-ddheader” class=”upperdd” onclick=”javascript:document.location.href=’http://www.google.com’”>GOOGLE</dt>
  </dl>

• deen d

  Great.. i tried something similar with CSS2 but it was not not this smooth effect.. this one is awesome !!!.. thanks

• Pingback: 300+ Jquery, CSS, MooTools and JS navigation menus | 1stwebdesigner

• http://nachitoglogloglo.com Rodrigo Spesia

  Hey!, really nice script. Thanks for giving if for free. Greetings from Mexico.

• Pingback: 300+ Jquery, CSS, MooTools and JS navigation menus | PaulSpoerry.com

• http://www.alojaweb.pe Alojaweb

  excellent work, thank’s for you contribution.

• Pingback: Navigation Effects Using JavaScript - Hidden Pixels

• Peca

  M, did you finish the multi-level code and if you did where can we download it? BTW, great job, I have a great deal of respect for “old-school” programing when a programmer starts from scratch (no jquery, prototype etc) and produces a light and fast code!

• nuntius

  Hello all. Thanx for the great menu!
  Does anyone know how to put a link to the menu item three (the one with no sub category)?
  Thanx again!

• Brenda

  I have a question on this menu system. I’ve implemented it into a website, and one of the menus that I have has multiple links, and in some cases, it’s longer than the web page that is displayed. The menus don’t scroll down, so if the page is too short, you can’t get to the end of the menu. Can you help me with this?

  Thanks.

• http://www.woodencrates.org jeff

  OK, I know this is kind of novice, but how do I create a clean looking link from the main menu without a flyout?

  Thanks much!

• Dan

  This is awesome, anyway I can change all the parent sides be links in addition to the flyouts? If not, at least change “Menu Item 3″ to be a link would be fantastic.

• http://www.flintshireleisuredrive.co.uk Neil

  Michael, Thanks for the script – it looks just the thing. However, I need for the sub menus to fly out to the left, not the right. I’ve been experimenting but no luck so far. Can you give guidance? Many thanks.

• Samir

  Does it support multilevel ? I tried without success..Let me know. Otherwise it is awesome

• Pingback: 300+ Jquery, CSS, MooTools and JS navigation menus | Neurosoftware web dev

• http://www.gingerbeardman.com matt

  Thank you so much for this – it rocks!

  For my own use, I modified it so that it only does not do the slide effect, just the fade: http://www.gingerbeardman.com/flyout-fade.zip

• http://diablosa.co.za SmL9

  Thanks so much! This an awesome piece of work; too good to be free!

  Thanks again, from South Africa.

• Kurt D

  I scanned the comments and as far as I know i didn’t see anybody with this issue. I have the menu working perfectly in all browsers except IE 7. When i mouse-over on the expanded menu, the menu disapears once i go between each item.. as soon as the “finger” goes away, it disapears.. Any thoughts? thanks..

• dwayne e

  Re: Vertical Flyout JavaScript Menu
  Per the example how would you make dropdown four link to another website?
  When adding the “href” my style comes out as the flyouts not as the main menu.

• http://www.Guro-Central.piczo.com Hitoshi

  I’ve been trying to put this into a table on dreamweaver and for some reason it just will not work, I tried both versions of this drop-menu and neighter has worked. I need help…

• ratsplayer

  Hi, very nice Menu and a big thx for the free use!!!
  I wished a second level, but its not soo important.
  Thank u very much.

  ratsplayer

• Rusty

  hmmm…works great in development and in preview. But expanded menu does not expand when live in IE and Firefox. Any thoughts?

• Rusty

  Sorry…should have added IE 7 and Firefox 3.0.5. Any assistance would be much appreciated. Thanks for what you do.

• taddeus

  hi,
  I now use the menu in my webpage and I very much like it so thanks for that, but there’s one thing: if I maximize my browser (1680*1050), the sliding effect is slower then when i use a small screen. Does anyone else have this problem and/or knows how to fix this?

• taddeus

  hi again, in addition to my last post:
  in IE the fade effect does’t occur at the first mouseover over a menu link, Then the submenu is just there. At the second mouseover the fade effect does occur. This happens everytime after i refresh the page. Could anyone help me out?

• B. Tran

  Hi,
  How do make the sub-menu fly to the left? I tried but could not make it work.

  Thanks

• Neil

  Hi,

  Awesome script, exactly what i’ve been looking for. I’m looking to use the slideup version of this menu, but am struggling to see the difference in code between it and the dropdown version. Is anyone able to tell me where i should be looking and what code i should be changing? It’d be a massive help!

  Thanks,
  Neil.

• Luka

  Hey i am using this script to..

  but i need a 3 sub menu. Is this possible with this script?

  Ty send me a mail at rovtar(AT)gmail.com

• http://www.northstarchurchsupply.com Tony

  This is an awesome menu; however, I am new to HTML and CSS. How do I put these files into Front Page??? I downloaded the files already and opened each one up in FP separately. How do I get this to work? Do I copy and paste all of this into one file? Please help. Thanks, TW

• Kino

  Nice script, would be cool to have as a wordpress plugin

• KawaiiAyu

  Im not very good with javascript, if I wanted each button to have its own image, and own roll over image, is there a way to do that?

• http://uucdc.org Craig

  This is a great, clean script. My current menu setup screws up with Firefox and Chrome. But is there a way of getting this so that the actual menus are embed in the script? That way, when a change is made to the menu, it would be represented on all pages. (I had also left this message on the “drop-down” version, but meant to leave it here. The joy of trying to cram real-life stuff in while at work.)

• Don

  Im facing the problem wat Peter faced. Menu works perfectly in firefox, however in IE7 the pop up layers keep appearing underneath the next column. I can’t find out whats causing it (Zindex possibly?).
  And in the next comment he wrote that he has fixed the prob by changing the Zindex. And it doesnt work for me. Any help for the needy!!!!!!

• Purethoughts

  Can anyone help in creating a WordPress plugin from this ?? It is a much needed functionlity and i want to add this to my left navigation widget. Any workaround to accommodate this will be appreciated.

  Thanks.

• Jason

  did you ever manage to adapt this script so that it allowed a second level of flyout? Would really like to use this on a site, but need more than one level

• http://w1ddd.org Judson Mitsock

  Hi,
  Great Job! Just what I am looking for… I have one problem… A flash object slide show. The flyout is going behind the object. How do I get the flyout on top? Is it possible?
  Boy I hope so… because this one nice little menu!
  Judson

• Pingback: Web Development Bangladesh

• shyju

  Heiii man… ur really gr8. but i would like 2 ask u 1 think, how i can make one more drop menu for the each sub menu???

• Pingback: 300+ Jquery, CSS, MooTools and JS navigation menus « Dogfeeds——IT Telescope

• http://www.helpyouoffice.com mhug

  I’ve been able to get first level of the menu to use a gif file as the background, how do I get the second level to do the same? BTW, great menu!

• JohnM

  Hi there, great menu, very easy to use… except for one problem!….. It seems so easy but it wont go for some reason…. how can i change the width of the submenus? they dont seem to change no matter what i change on the css.

  Thanks, great work

• http://www.liminal-design.co.uk Ryan

  This is a really nice menu, well done.

  How would you go about adding a 3rd level?

• http://www.studiokind.com Roscoe

  Hi there!
  Firstly, Thank you Michael, I love all of your scripts, so light, so clean, you are a generous genius.
  Second:
  Here is a quick little work around I figured out for multiple sub levels on the flyout menu, I have noticed many people asking for this function, me being one of them.
  Ok, here we go:
  First, use Michael's drop down menu instead of the flyout menu, it is a little bit leaner/ easier to modify and I prefer it.
  After you have downloaded the dropdown menu files, open up the style.css and make these changes.
  1. On "ul.menu" simply add a width property, anything but 100% seems to work, I went with 100px, this forces the menu to line up vertically instead of horizontally.
  2. On "ul.menu ul" change the "top:26px;" to 5px or 0px, this brings it up, also add "left:149px;", this pushes the original dropdown over to the side of the menu.
  That's it! Now you have a flyout menu with as many sub levels as you desire. I've tested this in Mozilla as well as IE 6 and 7, seems to work just fine.
  I know this is quite a rudimentary fix, but hey, it's simple and it works.
  I hope this helps some of you out.
  Keep up the good work Michael.

• Allie

  I love this, I just need it in different colors. I guess it is possible to change the colors?

• Squi

  Hi,

  is there a way for the menu to open from left to right instead of from top to bottom ?

  Thanks

• http://www.schoolsoft.web.id cyber_seph

  siph, I search this script in a long time, thanks friend

• http://something cschneider

  This menu doesn't handle wrapping well at all. Can you please tell me what I need to do to get it to wrap correctly. I have a client that has a flyout menu, but one of the choices in the flyout menu is "Biography & Autobiography" and when that is in place it will wrap because my menu is only 173 pixels wide. the wrapping doesn't bother me, but it squishes against the <li> below that one….any ideas?

• JD

  Hi,

  Is there a way to add an on click function to this? So when someone selects one it says clicked.
  Thanks!

• http://www.maisondieruck.com Mark

  Hi Michael, firstly thank you for creating these great navigation templates, they're fantastic! I'm trying to created a verticle drop down menu, where the submenu forces down the nav link on rollover, and goes back up on rollout. Here's how far I've got, any advice would be hugely appreciated – at the moment there seems to be some problem with padding/margin as it is different when first loaded to when the mouse has hovered. Sorry it's been driving me mad and I can't figure it out!

  http://www.maisondieruck.com/sg/index.html

  Many thanks

  Mark

• Shahab Harrafi

  Hi Michael…
  First of all thanks for the great menus.
  Did you check it on IE8? It has a little bug while droping down and the mouse moves on submenus. Do you know what's wrong?
  I've also checked it on different browsers such as Google Chrome, Mozilla Firefox and Opera. That's great…

• http://www.site2goal.co.il Mulli Bahr

  I wish to thank Michael for a great job!
  I had an integration problem where the first CSS line interfer with other CSS definitions. I noticed this issue in several places and I think that it
  needs a consideration because in some cases – I simply cannot use those
  remarkable tiny + elegant solution (unless I use it via iframe).

  My solution to the flyout is the following:
  1. Replace the first 2 .css lines with:
  #leftcolumn * {padding:0; margin:0}
  /*body {font:12px Verdana, Arial, Helvetica}*/

  2. Only one figure needs a change: from 204px to 194px.
  .dropdown a, .dropdown a:active, ….. width:194px}

  Done.
  I would like to increase the height of the lines but I leave it for later.
  Thanks again!
  Mulli

• Pingback: www.Fiddy.com » Flyout script that rocks

• http://www.bru.ac.th phanith

  Thank you very much. I really happy……..

• Jamie

  Hi, have you been able to look at the IE8 issue with this brilliant menu? the submenu items have a slight bug in it……??

• http://www.trazavirtual.com diseño web

  Sailing a little by Internet I did not find menus with as professional effects as this one, thanks for the contribution!

• David

  For some reason, my link won't work. I am using frames, so the target=body directs the page into the center of the frameset.
  Help!

  <dl class="dropdown">
  <dt id="calendar-ddheader" class="upperdd"
  onmouseover="ddMenu('calendar',1)"
  onmouseout="ddMenu('calendar',-1)">Calendar</dt>
  <dd id="calendar-ddcontent"
  onmouseover="cancelHide('calendar')"
  onmouseout="ddMenu('calendar',-1)">
  <ul>
  <li>
  <a href="calendar/currentSchedule.html"
  class="underline" target=body>Schedule</a>
  </li>
  <li>
  <a href="calendar/currentMonth.html" target=body>Calendar</a>
  </li>
  </ul>
  </dd>
  </dl>

• Pingback: 300+ Jquery, CSS, MooTools and JS navigation menus

• Kelly Dannon

  I'm having a problem.. I have an exact type of menu like the one listed above but how to you assign each button to a link? I noticed the code is:

  <dt id="two-ddheader" class="uppered">

  But where do you put the link.. such as making a "home button" link to index.html?

• http://www.zamshed.info Zamshed Farhan

  Hello .
  It's a must appreciable attempt to write such an

  article. It helps us to build a nice one.

• Pingback: Gotowe skrypty jquery, mootools « Sebastian Sobieraj

• Jonny

  Hi Michael and all,

  I second that: great job and beautiful menue.

  Is it just me or has anybody else had trouble when there are more than 10 menu items? (I need up to 12)

  At #11 it generates a JS-error:

  Error: c is null
  file: flyout.js
  row: 9

  This is row 9: "clearInterval(c.timer);"

  Any help is greatly apprechiated!

• Jonny

  Reply 2 myself:

  dude, just mixed up the dd-id, and that was it.

  @all: never mind … /-)

• http://planetabebe.com.br/site Eduardo

  Good morning, in the "Categories" from the left side of my site I am not able to make the plugin work. Should I put some code on the page "sidebar1.php??
  Already activated the plugin.

  Thank you very much

• http://www.cwu.edu/~ir Jameson

  I like this flyout menu that this page uses at this university, anyone know why it creates that extraspace in IE and how to control it? I appreciate any info

• zaghilovers

  Is there a vertical and horizontal menu combination? I need to implement a horizontal menu with the option of submenus to open vertically or in reverse..

• Avelino

  Hi Michael, thnx a lot for this…God Bless you and your family..

• Pingback: Flyout Menu 开源项目 - Ajax代码大全 - Java开源项目 - Menu - Flyout-Menu - Java免费软件 - 菜单控件 - 开源网

• http://www.giantspheres.com Kris Benoit

  Unfortunately this does not seem to be compatible with the iphone.

• http://www.eprocart.com Clayton

  I have a client who was using this script but found there were some issues with regards to the hover effect — or lack thereof — on mouseover of the submenu in IE8. After some testing I tracked down the issue to the way the opacity is applied for IE browsers.

  For IE 5 – 7 opacity is applied using `filter: alpha(opacity=value);`, whereas for IE 8 it's applied using `-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=value)";`.

  The solution I came up with was to force IE7 compatibility mode, by adding the below markup to the HTML document.
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

• http://www.kjodle.net Ken

  For all those who are looking for the menus to pop out to the left (if, for example, your menu is on the right side of your page), I know nothing about JavaScript, so I just opened the script and started playing around with different variables.

  In line 15, change "c.style.left" to "c.style.right".
  This will cause the menus to fly out to the left.

  You then need to adjust the OFFSET variable in line 3 from "-2" to something larger. I tried "15" and it works.

  Also, to make the top level item a link (i.e., "Dropdown One" etc.), just place your usual

  <a href="link location">link text</a> html

  between <dt id="one-ddcont…"> tag and the </dt> tag.

  Hope this helps. Thanks for a great script, Michael. This is exactly what I have been looking for. Questions/comments, shoot me an email from my page.

• http://www.orioncalls.com JoeB

  Fantastic menu! I am focusing on the nice flyout version.

  Question: I was looking over the Link-Only Heading (LOH) example you referred to at http://sandbox.leigeber.com/dropdown2/dropdown.html and I wondered if I could look at an LOH example that does not require defining an HTML table.

  Thanks again for the excellent flyout and dropdowns.

• DWads

  Hi Michael,

  Thanks for the post. I've been using the script with great success, but am trying to add multi levels to the menu. Is there a way this can be done easily using what's already there?

  Thanks in advance for your help

• Erukha07

  That's very nice..

• 3424235235

  44353453

• Cantrellfarms

  Thank you!!!!! Works Great.

• Cantrellfarms

  Try changing the "wrapper width" I change mine to 197px and it worked great.

• rexy rex

  thanks 4 your post it's nice,

• Julia

  Thank you so much. I have a question: where do you ad a link to
  <dt id="two-ddheader" class="uppered"> ?

• Dabbyj

  how to keep the roll over on the "DropDown One" while moving thru the dropdown menu (navigation item 1, navigation item 2… etc) does anyone know the ans

• Naveh Rachel

  Great menu although I have a serios problem: I floated the main menu to the right changing the float command in css. however, in IE only, when hover, the menu items return to left side of screen. on FF and Chrome works great. any idea? need to solve it quick. thanks. Rachel

• Naveh Rachel

  Great menu although I have a serios problem: I floated the main menu to the right changing the float command in css. however, in IE only, when hover, the menu items return to left side of screen. on FF and Chrome works great. any idea? need to solve it quick. thanks. Rachel

• Negar254000

  This is amazing. It's really really really amazing. I changed the colour and size slightly, and only one of the menus works as a drop down, but I'm using it on my website and it's really great. I'm so glad you posted it cause I really couldn't find it anywhere else and didn't really have time to learn how to write the javascript for it myself.
  Honestly, it's amazing. Thanks so much. It was a life saver.

• 809261663

  Thank you so much. I have a question: where do you ad a link to
  http://www.makxn.com

• Bahlawi89

  Thanks Man for your great job.

  http://www.tec-world.info 

  I will paraphrasing and post in my website and backlink to you

• adumpaul

  Nice informative post. Thank you for sharing.

Supported By