# Javascript Menu Positioning - n00b question =)

**URL:** <https://www.ruby-forum.com/t/javascript-menu-positioning-n00b-question/172997>\
**Category:** Rails\
**Created:** [July 31, 2009, 12:26am UTC](https://www.ruby-forum.com/t/javascript-menu-positioning-n00b-question/172997 "2009-07-31T00:26:32Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![jlovel](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/f05b48/32.png) [@jlovel](https://www.ruby-forum.com/u/jlovel)\
**Post date:** [July 31, 2009, 12:26am UTC](https://www.ruby-forum.com/t/javascript-menu-positioning-n00b-question/172997/1 "2009-07-31T00:26:32Z")

</div>

I am trying to make a javascript drop-down navigation menu for my first  
rails web site, and I am having some problems with where the menu list  
divs pop up on the page.

What I have is a horizontal menu bar with headings (the headings are  
links to the home page of each section), and then lists of the pages  
within that same section are _supposed to_ appear directly underneath  
their heading when you hover over the heading. Pretty standard stuff.

All of the effects and everything are working great, the only problem I  
am having is that the divs that hold the page lists pop up about 50px  
farther down and also to the right than I expected, so that they are far  
away from the header. This is a really big problem because the menu  
disappears when your cursor exits the header, so you never have time to  
click on anything in the dropdown menu!

Now, there’s just one more catch:  
I ran into a bug with getting my menus to disappear at first, so I found  
the solution on another site that makes all of the effects work. But  
that code places the div off of the page to the left using CSS, and then  
uses JavaScript to bring the div back into view, so… No, I cannot use  
CSS to position the div, I have to change the JavaScript.

Ok, so here’s the code:

/\* HTML for the headers & menus\*/

- [Home](https://www.ruby-forum.com/home "the home page")
- [About](https://www.ruby-forum.com/aboutus/about)

  - [Our Team](https://www.ruby-forum.com/aboutus/about)
  - [Our Mission](https://www.ruby-forum.com/aboutus/about)
  - [Our Story](https://www.ruby-forum.com/aboutus/about)
  - [Contact Us](https://www.ruby-forum.com/aboutus/about)

- [Store](https://www.ruby-forum.com/store/shop)

  - [Store](https://www.ruby-forum.com/store/shop)
  - [Add-On Products](https://www.ruby-forum.com/store/shop)
  - [Custom Packages](https://www.ruby-forum.com/store/shop)

/_JavaScript for hiding/showing menus_/

/\* Navigation menu style\*/ #tabbar { margin: 0px 20px 0px 20px; padding: 0px 0px 0px 0px; text-align: left; display: block; width: 760px; vertical-align: bottom; background-color:#000000; } #tabbarbox { margin: 0 auto; padding: 7px 0 0 0; width: 760px; background: rgb(231,231,231) url("images/tabbar.jpg") no-repeat bottom center; vertical-align: bottom; } .tab, .tabselected { display: table-cell; text-align: center; height: 22px; padding: 0px 2px 0px 2px; margin: 0px 0px 0px 0px; vertical-align: middle; } #tabbar a { display: table-cell; text-align: center; height: 22px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; vertical-align: middle; } .tabbar\_button\_l { display: table-cell; vertical-align: middle; } .tabbar\_button\_c { margin: 0 7px 0 7px; padding: 2px 0 2px 0; vertical-align: middle; } .tab .tabbar\_button\_l { background: transparent url(images/tab\_unselected\_left.jpg) no-repeat top left; } .tab .tabbar\_button\_c { background: transparent url(images/tab\_unselected\_central.jpg) repeat-x top; } .tab .tabbar\_button\_r { background: transparent url(images/tab\_unselected\_right.jpg) no-repeat top right; } .tabselected .tabbar\_button\_l { background: transparent url(images/tab\_left.jpg) no-repeat top left; } .tabselected .tabbar\_button\_c { background: transparent url(images/tab\_central.jpg) repeat-x top; } .tabselected .tabbar\_button\_r { background: transparent url(images/tab\_right.jpg) no-repeat top right; } .amenu { position: absolute; left: -999em; margin: 25px 0px 0px 2px; padding: 5px 5px 5px 5px; border: 1px solid #A2A2A2; background-color: #E6E6E6; min-width: 88px; text-align: left; } .amenu ul{ padding:0; margin:0px 0px 0px 17px; } .amenu ul li { display: list-item; list-style-type: none; margin: 0; padding: 0; vertical-align: middle; } .amenu ul ul{ padding: 0; margin: 0px 0px 0px 10px; } .amenu:hover{ left: 0em; } /\* IE Hack \*/ .grouphover { left: 0em; }

Sorry, I don’t have a live preview, but hopefully I gave enough info in  
this super-long post. =)

I’m sure the answer is not too complicated, as I learned the JavaScript  
from online tutorials, and I’m probably just not familiar with the  
solution.

Thanks a million in advance for any help guys!

---

<div class="post-metadata">

**Author:** ![jlovel](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/f05b48/32.png) [@jlovel](https://www.ruby-forum.com/u/jlovel)\
**Post date:** [July 31, 2009, 12:49am UTC](https://www.ruby-forum.com/t/javascript-menu-positioning-n00b-question/172997/2 "2009-07-31T00:49:14Z")

</div>

Julia L. wrote:

> I am trying to make a javascript drop-down navigation menu for my first  
> rails web site  
> […]

Your issues appear to have nothing to do with Rails, and would probably  
be better suited to a JavaScript or CSS forum. Please note, however,  
that the JS you posted does not appear (on cursory inspection) to be  
terribly good code, and that Rails includes the Prototype JS framework,  
which may make your life easier.

If it were me, however, I wouldn’t use JS for dropdown menus. It is  
possible to use CSS’s :hover pseudoclass for the same purpose – and it  
will work even if JS is turned off. I think this is the preferable  
solution in most cases.

## Best,

Marnen Laibow-Koser  
[http://www.marnen.org](http://www.marnen.org)  
removed\_email\_address@domain.invalid

---

<div class="post-metadata">

**Author:** ![jlovel](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/f05b48/32.png) [@jlovel](https://www.ruby-forum.com/u/jlovel)\
**Post date:** [July 31, 2009, 4:02pm UTC](https://www.ruby-forum.com/t/javascript-menu-positioning-n00b-question/172997/3 "2009-07-31T16:02:35Z")

</div>

Marnen Laibow-Koser wrote:

> Julia L. wrote:
> 
> > I am trying to make a javascript drop-down navigation menu for my first  
> > rails web site  
> > […]
> 
> Your issues appear to have nothing to do with Rails, and would probably  
> be better suited to a JavaScript or CSS forum. Please note, however,  
> that the JS you posted does not appear (on cursory inspection) to be  
> terribly good code, and that Rails includes the Prototype JS framework,  
> which may make your life easier.
> 
> If it were me, however, I wouldn’t use JS for dropdown menus. It is  
> possible to use CSS’s :hover pseudoclass for the same purpose – and it  
> will work even if JS is turned off. I think this is the preferable  
> solution in most cases.
> 
> ## Best,
> 
> Marnen Laibow-Koser  
> [http://www.marnen.org](http://www.marnen.org)  
> removed\_email\_address@domain.invalid

I started off using :hover, but it did not work in IE, so i had to use  
JS as a workaround. As much as I would like to ignore that bug, I’m not  
the only person who will be using the website, so unfortunately MS ruins  
the pretty code. I also would have much preferred to use CSS, as I  
already know how to code it properly, whereas I am just learning  
JavaScript.  
Anyways, thank you for the reply, I’ll try some JS forums, too.

---

<div class="post-metadata">

**Author:** ![jlovel](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/f05b48/32.png) [@jlovel](https://www.ruby-forum.com/u/jlovel)\
**Post date:** [July 31, 2009, 6:05pm UTC](https://www.ruby-forum.com/t/javascript-menu-positioning-n00b-question/172997/4 "2009-07-31T18:05:44Z")

</div>

Julia L. wrote:  
[…]

> I started off using :hover, but it did not work in IE, so i had to use  
> JS as a workaround.

Ah, I didn’t realize that :hover on anything but a doesn’t work in IE \<  
7. Then again, my menu titles are a elements, so this wasn’t an  
issue…

By the way, I _strongly_ suggest you take a look at Compass, which  
requires you learning Sass (and you might as well throw in Haml while  
you’re at it). Haml makes writing templates faster than using HTML and  
ERb, Sass abstracts CSS in a very useful way, and Compass runs with the  
idea of Sass by providing a framework which, if used properly,  
completely does away with the need for presentation-based CSS classes!  
I believe it’s essential for good semantic markup.

## Best,

Marnen Laibow-Koser  
[http://www.marnen.org](http://www.marnen.org)  
removed\_email\_address@domain.invalid