Absolute Positioning Headache

[MrTripi]

Hi, I've recently started messing around with javascript so I could design a drop down menu. Everything went smoothly, I basically created a class for each of the titles which would be seen at the top of the menu, then i used an item class and id for each of the submenus. onmouseover causes the submenus to go from display:none to display:block. onmouseout reverts, them back to normal, however I noticed that the submenus would disappear immediately unless I set their position to absolute and increase the z-index. this solution worked perfectly in every browser Opera, Firefox, Chrome, etc-all except IE7. Here, take a look.

//with display:block so you can see how they're being positioned
http://www.freewarechubs.com/IE7.bmp

here's how it correctly shows up under firefox
http://www.freewarechubs.com/firefox.bmp


code for the menu

<div id = "top-menu">
<div class = "clear" /></div>

<div class = "MenuSections" onmouseover = "javascript:document.getElementById('MenuItem0').style.display='block';" onmouseout = "javascript:document.getElementById('MenuItem0').style.display = 'none';">
<a href = "http://www.accountingtechnologynews.com/NPTech">Home</a>
<br/>
<div class = "MenuItems" id = "MenuItem0">
Faqs<br/>
News Flash<br/>
Management Features<br/>
Article Submissions<br/>
Reviews
</div>


</div>

<div class = "MenuSections" onmouseover = "javascript:document.getElementById('MenuItem1').style.display='block';" onmouseout = "javascript:document.getElementById('MenuItem1').style.display = 'none';">
Articles
<br/>
<div class = "MenuItems" id = "MenuItem1">
New
</div>

</div>


<div class = "MenuSections" onmouseover = "javascript:document.getElementById('MenuItem2').style.display='block';" onmouseout = "javascript:document.getElementById('MenuItem2').style.display = 'none';">
Product Information

<div class = "MenuItems" id = "MenuItem2">
Reviews<br/>
Announcements
</div>

</div>


<div class = "MenuSections" onmouseover = "javascript:document.getElementById('MenuItem3').style.display='block';" onmouseout = "javascript:document.getElementById('MenuItem3').style.display = 'none';">
Community Echos

<div class = "MenuItems" id = "MenuItem3">
<a href = "http://accountingtechnologynews.com/NPTech/index.php?option=com_alphacontent&section=7&category=22&Itemid=119"> For Your Information</a><br/>
Just One Question<br/>
From the Top
</div>

</div>


<div class = "MenuSections" onmouseover = "javascript:document.getElementById('MenuItem4').style.display='block';" onmouseout = "javascript:document.getElementById('MenuItem4').style.display = 'none';">
News


<div class = "MenuItems" id = "MenuItem4">
News<br/>
The Buzz<br/>
Latest
</div>
</div>
<div class = "clear" /></div>



</div>



any ideas? :(

[willyp]

You need to attach your css as well. It is common practice to have dropdown menus be inside lists as well....



<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>

[MrTripi]

here's all the relavent css

#top-menu{
float: left;
height: 30px;
width: 650px;
}

div.MenuSections{
color: white;
background: gray;http://www.webdeveloper.com/forum/newreply.php?do=newreply&noquote=1&p=960057
padding: 2px;
width: 120px;
/*height: 23px;*/
text-align:center;
float: left;
margin-right:4px;
margin-top:8px;
float:left;
/*
position:absolute;*/
}

div.MenuItems{
margin-right: 6px;
color: yellow;
background: gray;
padding: 2px;
width: 115px;
text-align: center;
display: none;
position:absolute;
z-index:1;
float: left;
}



thanks for the help guys, i still haven't been able to figure this out.

[willyp]

I strongly suggest you running through this tutorial. It is a great starting point to learning the proper way to do drop downs.

http://www.alistapart.com/articles/dropdowns

[MrTripi]

man i hate IE with a passion. It working fine, the submenus show up when you hover over them in both IE and Firefox. Unfortunately the submenus are positioned directly to the right. what the hell is the deal with this browser, I can't get anything to work correctly.

[willyp]

Hang in there bro! We all feel your pain and have been there. Just know that it can work, I will take a closer look at your problem when I have a chance. I do suggest doing a test page outside of this project to prove to yourself that it can be done. Maybe follow that tutorial, or just pull out the piece you are struggling with to isolate the issue. Good luck bro!

[MrTripi]

ok, so here goes :P

the new code

<ul id="nav">
<li class = "drop_menu"><a href = "http://www.accountingtechnologynews.com/NPTech">Home</a>
</li>


<li class = "drop_menu"><a href="">Articles</a>
<ul class = "open_menu">
<li><a href="">New
</a></li>

</ul>
</li>

<li class = "drop_menu"><a href="">Product Information</a>
<ul class = "open_menu">
<li><a href="">Reviews
</a></li>
<li><a href="">Announcements</a></li>
</ul>
</li>

<li class = "drop_menu"><a href="">Community Echos</a>
<ul class = "open_menu">
<li><a href="">For your Information</a></li>
<li><a href="">Just one Question</a></li>
<li><a href="">From the Top</a></li>
</ul>
</li>

<li class = "drop_menu"><a href="">News</a>
<ul class = "open_menu">
<li><a href="">News</a></li>
<li><a href="">The Buzz</a></li>
<li><a href="">Latest</a></li>

</ul>
</li>


</ul>



the new css

.drop_menu{
background: #ababab;
margin-left: 5px;
margin-top: 13px;
}

.open_menu{
background: #ababab;
}

ul {
padding: 0;
margin: 0;
list-style: none;
}

li {
float: left;
position: relative;/*
width: 10em;*/
width: 120px;
}

li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}

li > ul {
top: auto;
left: auto;
}

li:hover ul, li.over ul{ display: block; }


Thanks to that tutorial the new menu looks amazing in firefox, all I'll need to do is mess around with the colors and the corners of each menu, etc. Unfortunately as you'll see from this picture, IE is still displaying each submenu to the right instead of directly beneath the top menu. Any ideas?


http://www.freewarechubs.com/IEGlitch.bmp

[willyp]

Try putting:

position:relative;

on the .open_menu class

I have a feeling this may have been your old problem too. position:absolute is relative to the closest parent that has position:relative on it.

I hope that helps...let me know

[MrTripi]

you my friend, are a freakin genius. thanks so much, it's working perfectly on all browsers now.

[riskmod]

ha he beat me. I use a combination of this:


<div style="psition: relative;">
<div style="position: absolute;">
yoyo
</div>
</div>



Works wonders :)

[willyp]

Thanks for the compliment! Super glad that is working for you. One thing though, I don't think that li:hover works on IE6, if you care. Pretty sure you need to use javascript to handle the hover for ie6...A simple version of the script is in that tutorial I sent. A bit outdated now, but certainly functional.

[MrTripi]

li:hover ul, li.over ul{ display: block; } is actually working perfectly on IE7. not sure about the others though.

[willyp]

li:hover ul, li.over ul{ display: block; } is actually working perfectly on IE7. not sure about the others though.

Right, so this part:
li:hover ul

Will work in all new browsers.

The reason for this part:
li.over ul

Is to work in older browsers by applying the class 'over' to the li that gets hovered upon using javascript.

so in english the script says: "look at the dropdown menu, if you feel a mouse hover over an <li>, apply the class 'over' to it so that it looks like <li class="over">

So then when the li has the class 'over', it has the same effect as the li:hover.

I recommend trying to get the javascript method working, but only if you care about IE6 (which a lot of people actually still use, depends on the audience of your site though). The javascript to make this work is inside that article I posted earlier in this thread.